web-dev-qa-db-ger.com

Wie entferne ich Rahmen von bestimmten PrimeFaces p: panelGrid?

Ich habe Schwierigkeiten beim Entfernen des Rahmens von einem bestimmten PrimeFaces <p:panelGrid>.

<p:panelGrid styleClass="companyHeaderGrid">
    <p:row>
        <p:column>
            Some tags
        </p:column>
        <p:column>
            Some tags
        </p:column>
    </p:row>
</p:panelGrid>

Ich konnte den Rand aus den Zellen entfernen mit:

.companyHeaderGrid td {
    border: none;
}

Aber

.companyHeaderGrid {
    border: none;
}

Funktioniert nicht.

57
Eleeist

Der Rahmen wurde für die generierten tr- und td-Elemente festgelegt, nicht für die table. Also sollte dies tun:

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

Wie ich es gefunden habe Überprüfen Sie einfach die generierte HTML-Ausgabe und alle CSS-Stilregeln im Webdeveloper-Toolset von Chrome (Rechtsklick, Inspect Element oder drücken Sie F12). Firebug und IE9 haben ein ähnliches Toolset. Beachten Sie bei der Verwirrung, dass JSF/Facelets schließlich HTML generieren und dass CSS nur für das HTML-Markup gilt, nicht für den JSF-Quellcode. Um CSS anzuwenden/zu finetune, müssen Sie stattdessen in die Client-Seite (Webbrowser) schauen.

enter image description here

Siehe auch:


Wenn Sie sich noch auf PrimeFaces 4 oder älter befinden, verwenden Sie stattdessen unten:

.companyHeaderGrid.ui-panelgrid>*>tr,
.companyHeaderGrid.ui-panelgrid>*>tr>td {
    border: none;
}
99
BalusC

Ich verwende Primefaces 6.0 und um Ränder aus meinem Panel-Raster zu entfernen, verwende ich diese Stilklasse "ui-noborder" wie folgt:

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

Es verwendet eine CSS-Datei mit dem Namen "components" in primefaces lib

25
Mr.Q

Das hat für mich funktioniert:

. ui-panelgrid td, .ui-panelgrid tr 
 {. Rahmenart: keine! wichtig 
} 
21
Mohammed Pasha

Wenn die BalusC-Antwort nicht funktioniert, versuchen Sie Folgendes:

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

Wenn Sie eine Zeile zwischen den Spalten finden, verwenden Sie den folgenden Code:

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

Ich habe das mit Primefaces 5.1 überprüft

<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>  
4
Ajeesh

Heute haben Primefaces 5.x ein Attribut in panelGrid mit dem Namen "columnClasses".

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

} Wiederholen Sie die CSS-Klasse also zweimal für ein PanelGrid mit 2 Spalten.

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

Für andere Elemente ist das hässliche "! Wichtig" nicht notwendig, aber an der Grenze einfach damit zu funktionieren.

3
Kanjarana

Versuchen

<p:panelGrid styleClass="ui-noborder">
2
spyder man

Wenden Sie für die traditionellen und alle modernen Themen Folgendes an:

<!--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>
0
Koekiebox

Wenn Sie nur etwas Einfacheres wollen, können Sie einfach Folgendes ändern:

<p:panelGrid >

</p:panelGrid>

zu:

<h:panelGrid border="0">

</h:panelGrid>

Das hat gut für mich funktioniert 

0
Edson Cezar

Wie von BalusC erwähnt, wird der Rahmen von PrimeFaces für die generierten tr- und td-Elemente festgelegt, nicht für die table. Beim Versuch mit PrimeFaces Version 5 sieht es jedoch so aus, als gäbe es eine genauere Übereinstimmung mit dem PrimeFaces-CSS-Code .ui-panelgrid .ui-panelgrid-cell > solid, was immer noch dazu führt, dass schwarze Rahmen angezeigt werden, wenn der vorgeschlagene Stil angewendet wird.

Verwenden Sie den folgenden Stil, um die Primefaces zu überschreiben, ohne die !important-Deklaration zu verwenden:

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

Wie erwähnt, stellen Sie sicher, dass Ihr CSS nach dem PrimeFaces geladen wird .

0
CodeNotFound

Ich habe das Panelgrid in datable platziert, und daher ist meine Arbeitslösung

.ui-datatable-scrollable-body .myStyleClass tbody td{border:none;}

for

<h:panelGrid  styleClass="myStyleClass" >...</h:panelGrid>
0
Teela

bei mir funktioniert nur der folgende code

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

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

Fügen Sie diese Zeilen einfach in Ihre benutzerdefinierte css mycss.css ein

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