Comment supprimer la bordure de certains PrimeFaces p:panelGrid ?

Question

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

<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 la bordure des cellules avec :

.companyHeaderGrid td {
    border: none;
}

Mais

.companyHeaderGrid {
    border: none;
}

Ne fonctionne pas.

Answer 1

La bordure a été fixée sur le produit tr et td et non sur les éléments table . Donc, cela devrait faire l'affaire :

.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 la boîte à outils du développeur Web de Chrome (clic droit, Inspecter l'élément ou appuyez sur F12). Firebug et IE9 disposent d'un ensemble d'outils similaires. En ce qui concerne la confusion, gardez à l'esprit que JSF/Facelets génère en fin de compte du HTML et que les CSS ne s'appliquent qu'au balisage HTML, et non au code source JSF. Pour appliquer/régler les CSS, vous devez donc plutôt regarder du côté du client (navigateur Web).

Voir aussi :

• Comment puis-je remplacer les CSS par défaut de PrimeFaces par des styles personnalisés ?
• Supprimer la bordure de tous les composants PrimeFaces p:panelGrid

---

Si vous êtes toujours sur PrimeFaces 4 ou plus ancien, utilisez ci-dessous à la place :

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

Answer 2

Cela a marché pour moi :

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

Answer 3

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

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

Answer 4

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>

Answer 5

Il suffit d'ajouter ces lignes dans votre css personnalisé mycss.css

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