Jak usunąć obramowanie z określonych przestrzeni PrimeFaces p: panelGrid?

Używam Primefaces 6.0 i aby usunąć obramowania z mojej siatki panelu używam klasy stylu "UI-noborder" w następujący sposób:

<p:panelGrid columns="3" styleClass="ui-noborder">
   <!--panel grid contents -->
</p:panelGrid>

Używa pliku css o nazwie "components" w primefaces lib

To mi pomogło:

.ui-panelgrid td, .ui-panelgrid tr
{
    border-style: none !important
}

Jeśli odpowiedź BalusC nie działa spróbuj tego:

.companyHeaderGrid td {
     border-style: hidden !important;
}

Jeśli znajdziesz linię między kolumnami, użyj poniższego kodu,

.panelNoBorder, .panelNoBorder tr, .panelNoBorder td{
border: hidden;
border-color: white;
}

Sprawdziłem to z Primefaces 5.1

<h:head>
     <title>Login Page</title>    
     <h:outputStylesheet library="css" name="common.css"/>
</h:head> 

<p:panelGrid id="loginPanel" columns="3" styleClass="panelNoBorder">
<p:outputLabel value="Username"/> <p:inputText id="loginTextUsername"/>
<p:outputLabel value="Password"/> <p:password id="loginPassword"/>
<p:commandButton id="loginButtonLogin" value="Login"/> <p:commandButton id="loginButtonClear" value="Clear"/>
</p:panelGrid>  

/ Align = "Left" / x posiada atrybut w panelGrid o nazwie "columnClasses".

.no-border {
    border-style: hidden !important ; /* or none */

} Tak więc, do panelGrid z 2 kolumnami, powtórz dwa razy klasę css.

<p:panelGrid columns="2" columnClasses="no-border, no-border">

Do innych elementów, brzydkie"!ważne " nie jest konieczne , ale do granicy tylko z nim działa dobrze do mnie.

Try

<p:panelGrid styleClass="ui-noborder">

Po prostu dodaj te linie na swoim niestandardowym css mycss.css

table tbody .ui-widget-content {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 0 solid #FFFFFF;
    color: #333333;
}

Jak wspomniano przez BalusC, ramka jest ustawiana przez PrimeFaces na wygenerowanych elementach tr i td, a nie na table. Jednak podczas próby z PrimeFaces w wersji 5, wygląda na to, że istnieje bardziej specyficzne dopasowanie z CSS PrimeFaces .ui-panelgrid .ui-panelgrid-cell > solid, które nadal powoduje wyświetlanie czarnych ramek podczas aplikacji sugerowanego stylu.

Spróbuj użyć następującego stylu, aby przesunąć przestrzeń podstawową bez użycia deklaracji !important:

.companyHeaderGrid tr, .companyHeaderGrid td.ui-panelgrid-cell {
    border: none;
}

Jako wzmianka upewnij się, że Twój CSS jest załadowany po pierwszej.

Jeśli chcesz czegoś prostszego, możesz po prostu zmienić:

<p:panelGrid >

</p:panelGrid>

Do:

<h:panelGrid border="0">

</h:panelGrid>

That ' s worked fine for me

Dla mnie działa tylko następujący kod

.noBorder tr {
border-width: 0 ;
}
.ui-panelgrid td{
    border-width: 0
}

<p:panelGrid id="userFormFields" columns="2" styleClass="noBorder" >
</p:panelGrid>

Aby tradycyjne, jak również wszystkie nowoczesne motywy nie miały granicy, zastosuj następujące;

<!--No Border on PanelGrid-->
    <h:outputStylesheet>
        .ui-panelgrid, .ui-panelgrid td, .ui-panelgrid tr, .ui-panelgrid tbody tr td
        {
            border: none !important;
            border-style: none !important;
            border-width: 0px !important;
        }
    </h:outputStylesheet>

Proszę spróbować również

.ui-panelgrid tr, .ui-panelgrid td {
border:0 !important;
}

Użyj poniższej modyfikacji stylu, aby usunąć obramowanie przycisku radiowego Primefaces

.ui-selectoneradio td, .ui-selectoneradio tr
{
    border-style: none !important
}