web-dev-qa-db-fra.com

Comment supprimer une bordure de PrimeFaces p: panelGrid?

J'ai des difficultés à supprimer une bordure d'un <p:panelGrid> PrimeFaces spécifique.

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

J'ai pu supprimer les bordures des cellules avec:

.companyHeaderGrid td {
    border: none;
}

Mais

.companyHeaderGrid {
    border: none;
}

Ne marche pas.

cssjsfprimefacesfacelets
57
Eleeist

La bordure est définie sur les éléments tr et td générés et non sur les table. Donc, cela devrait faire:

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

Comment je l'ai trouvé? Il suffit de vérifier la sortie HTML générée et toutes les règles de style CSS dans le jeu d'outils WebDeveloper de Chrome (clic droit, Inspect Element ou appuyez sur F12). Firebug et IE9 ont un ensemble d'outils similaires. En ce qui concerne la confusion, gardez simplement à l'esprit que JSF/Facelets génère finalement du HTML et que CSS ne s'applique que sur le balisage HTML, pas sur le code source JSF. Donc, pour appliquer/affiner le CSS, vous devez plutôt regarder dans le côté client (navigateur Web).

enter image description here

Voir également:

Si vous êtes toujours sur PrimeFaces 4 ou une version antérieure, utilisez ci-dessous:

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

J'utilise Primefaces 6.0 et afin de supprimer les bordures de ma grille de panneaux, j'utilise cette classe de style "ui-noborder" comme suit:

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

Il utilise un fichier css nommé "composants" dans la librairie primefaces

25
Mr.Q

Cela a fonctionné pour moi:

. ui-panelgrid td, .ui-panelgrid tr 
 {
 style de bordure: aucun! important 
}
21
Mohammed Pasha

Si la réponse de BalusC ne fonctionne pas, essayez ceci:

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

Si vous trouvez une ligne entre les colonnes, utilisez le code ci-dessous,

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

J'ai vérifié cela avec 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>
4
Ajeesh

De nos jours, Primefaces 5.x possède un attribut dans panelGrid nommé "columnClasses".

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

} Ainsi, pour un panelGrid avec 2 colonnes, répétez deux fois la classe css.

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

Pour d'autres éléments, le "! Important" moche n'est pas nécessaire, mais pour la frontière, cela ne me pose aucun problème.

3
Kanjarana

Essayer

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

Pour que les thèmes traditionnels ainsi que tous les thèmes modernes n'aient pas de frontière, appliquez ce qui suit:

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

Si vous voulez juste quelque chose de plus simple, vous pouvez simplement changer:

<p:panelGrid >

</p:panelGrid>

à:

<h:panelGrid border="0">

</h:panelGrid>

Ça a bien fonctionné pour moi 

0
Edson Cezar

Comme mentionné par BalusC, PrimeFaces définit la frontière sur les éléments tr et td générés, et non sur table. Cependant, lors de l’essai avec PrimeFaces version 5, il semble qu’il existe une correspondance plus spécifique dans le code CSS PrimeFaces .ui-panelgrid .ui-panelgrid-cell > solid qui entraîne toujours l’affichage de bordures noires lors de l’appylation du style suggéré.

Essayez d’utiliser le style suivant pour remplacer celui de Primefaces sans utiliser la déclaration !important:

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

Comme mentionné, assurez-vous que votre CSS est chargé après celui de PrimeFaces .

0
CodeNotFound

J'ai placé le panelgrid dans datatable

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

for

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

pour moi seul le code suivant fonctionne

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

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

Il suffit d'ajouter ces lignes sur votre css personnalisé. Mycss.css

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