panelGrid border does not want to be hidden

Question

I am trying to develop a fom with Primefaces, there is one border that I can't hide between two grids. I tried to make border hidden and border width on 0px. All the borders disapear except this one. I don't have any idea about what I can ajust to fix this issue.

Page view :

enter image description here

Page xhtml :

<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
            xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:fn="http://java.sun.com/jsp/jstl/functions"
            xmlns:p="http://primefaces.org/ui" template="/templates/template.xhtml"
            xmlns:sec="http://www.springframework.org/security/tags">

<ui:define name="titre">
    <h:outputText value="#{lbl['page.entretien.annuel.personnel.title']}"
                  styleClass="titre"/>
</ui:define>

<ui:define name="content">
    <p:panel id="entretienAnnuelPersonnelPanel" style="border: hidden ; border-width: 0px">


        <p:panelGrid columns="2" style="border: hidden">
            <p:panelGrid columns="1" cellspacing="2" cellpadding="5" style="border: hidden ; border- 
 width: 0px">
                <h1>#{lbl['entretien.annuel.personnel.organisation.commerciale']}</h1>
            </p:panelGrid>
            <h:panelGrid columns="2" cellspacing="2" cellpadding="5" style="border: hidden ; border- 
 width: 0px">
                <p:outputLabel
                        value="# 
 {lbl['entretien.annuel.personnel.organisation.commerciale.comprehension']}"/>
                <p:selectOneRadio unselectable="true">
                    <f:selectItem itemLabel="0" itemValue="0"/>
                    <f:selectItem itemLabel="1" itemValue="1"/>
                    <f:selectItem itemLabel="2" itemValue="2"/>
                    <f:selectItem itemLabel="3" itemValue="3"/>
                    <f:selectItem itemLabel="4" itemValue="4"/>
                </p:selectOneRadio>
                <p:outputLabel
                        value="# 
 {lbl['entretien.annuel.personnel.organisation.commerciale.actions']}"/>
                <p:selectOneRadio unselectable="true">
                    <f:selectItem itemLabel="0" itemValue="0"/>
                    <f:selectItem itemLabel="1" itemValue="1"/>
                    <f:selectItem itemLabel="2" itemValue="2"/>
                    <f:selectItem itemLabel="3" itemValue="3"/>
                    <f:selectItem itemLabel="4" itemValue="4"/>
                </p:selectOneRadio>
                <p:outputLabel
                        value="# 
 {lbl['entretien.annuel.personnel.organisation.commerciale.reportings']}"/>
                <p:selectOneRadio unselectable="true">
                    <f:selectItem itemLabel="0" itemValue="0"/>
                    <f:selectItem itemLabel="1" itemValue="1"/>
                    <f:selectItem itemLabel="2" itemValue="2"/>
                    <f:selectItem itemLabel="3" itemValue="3"/>
                    <f:selectItem itemLabel="4" itemValue="4"/>
                </p:selectOneRadio>
                <p:outputLabel
                        value="# 
 {lbl['entretien.annuel.personnel.organisation.commerciale.orientation']}"/>
                <p:selectOneRadio unselectable="true">
                    <f:selectItem itemLabel="0" itemValue="0"/>
                    <f:selectItem itemLabel="1" itemValue="1"/>
                    <f:selectItem itemLabel="2" itemValue="2"/>
                    <f:selectItem itemLabel="3" itemValue="3"/>
                    <f:selectItem itemLabel="4" itemValue="4"/>
                </p:selectOneRadio>
                <p:outputLabel
                        value="# 
 {lbl['entretien.annuel.personnel.organisation.commerciale.travail.equipe']}"/>
                <p:selectOneRadio unselectable="true">
                    <f:selectItem itemLabel="0" itemValue="0"/>
                    <f:selectItem itemLabel="1" itemValue="1"/>
                    <f:selectItem itemLabel="2" itemValue="2"/>
                    <f:selectItem itemLabel="3" itemValue="3"/>
                    <f:selectItem itemLabel="4" itemValue="4"/>
                </p:selectOneRadio>
                <p:outputLabel
                        value="# 
  {lbl['entretien.annuel.personnel.organisation.commerciale.prise.decision']}"/>
                <p:selectOneRadio unselectable="true">
                    <f:selectItem itemLabel="0" itemValue="0"/>
                    <f:selectItem itemLabel="1" itemValue="1"/>
                    <f:selectItem itemLabel="2" itemValue="2"/>
                    <f:selectItem itemLabel="3" itemValue="3"/>
                    <f:selectItem itemLabel="4" itemValue="4"/>
                </p:selectOneRadio>
                <h3>Commentaire</h3>
                <p:inputTextarea rows="6" cols="45" />
            </h:panelGrid>
        </p:panelGrid>
        <p:panelGrid columns="2" style="border: hidden">
            <p:panelGrid columns="1" cellspacing="2" cellpadding="5" style="border: hidden ; border- 
 width: 0px">
                <h1 style="margin-top:0">#{lbl['entretien.annuel.personnel.prerequis.professionnel']} 
 </h1>
            </p:panelGrid>
            <h:panelGrid columns="2" cellspacing="2" cellpadding="5" style="border: hidden ; border- 
 width: 0px">
                <p:outputLabel
                        value="# 
 {lbl['entretien.annuel.personnel.prerequis.professionnel.comprehension.produits']}"/>
                <p:selectOneRadio unselectable="true">
                    <f:selectItem itemLabel="0" itemValue="0"/>
                    <f:selectItem itemLabel="1" itemValue="1"/>
                    <f:selectItem itemLabel="2" itemValue="2"/>
                    <f:selectItem itemLabel="3" itemValue="3"/>
                    <f:selectItem itemLabel="4" itemValue="4"/>
                </p:selectOneRadio>
                <p:outputLabel
                        value="# 
 {lbl['entretien.annuel.personnel.prerequis.professionnel.placement.produits']}"/>
                <p:selectOneRadio unselectable="true">
                    <f:selectItem itemLabel="0" itemValue="0"/>
                    <f:selectItem itemLabel="1" itemValue="1"/>
                    <f:selectItem itemLabel="2" itemValue="2"/>
                    <f:selectItem itemLabel="3" itemValue="3"/>
                    <f:selectItem itemLabel="4" itemValue="4"/>
                </p:selectOneRadio>
                <p:outputLabel
                        value="# 
 {lbl['entretien.annuel.personnel.prerequis.professionnel.maitrise.objections']}"/>
                <p:selectOneRadio unselectable="true">
                    <f:selectItem itemLabel="0" itemValue="0"/>
                    <f:selectItem itemLabel="1" itemValue="1"/>
                    <f:selectItem itemLabel="2" itemValue="2"/>
                    <f:selectItem itemLabel="3" itemValue="3"/>
                    <f:selectItem itemLabel="4" itemValue="4"/>
                </p:selectOneRadio>
                <p:outputLabel
                        value="# 
 {lbl['entretien.annuel.personnel.prerequis.professionnel.comprehension.analyse']}"/>
                <p:selectOneRadio unselectable="true">
                    <f:selectItem itemLabel="0" itemValue="0"/>
                    <f:selectItem itemLabel="1" itemValue="1"/>
                    <f:selectItem itemLabel="2" itemValue="2"/>
                    <f:selectItem itemLabel="3" itemValue="3"/>
                    <f:selectItem itemLabel="4" itemValue="4"/>
                </p:selectOneRadio>
                <h3>Commentaire</h3>
                <p:inputTextarea rows="6" cols="45" />
            </h:panelGrid>
        </p:panelGrid>
    </p:panel>

</ui:define>

</ui:composition>

Thank you !

Does this answer your question? [How do I override default PrimeFaces CSS with custom styles?](https://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles) — Jasper de Vries, Aug 19 '20 at 12:22
Use Development Tools of Browser to check if your css is correct. See where style Attribut is set in the dom tree (I think it's set to the wrong elements). Use a Stylesheet and work with classes/ids to change styling. — anm, Aug 19 '20 at 13:19
Please note that the panelGrid component will render a HTML table. Setting the border of the component will set the border of the table, not of its table cells. For that you need to create custom CSS (see duplicate). — Jasper de Vries, Aug 19 '20 at 13:58
Did you try `styleClass="ui-noborder"` its a built in PF style for removing borders — Melloware, Aug 19 '20 at 16:50
@Melloware I didn't know about that one. Are the classes documented somewhere? Anyway, that makes this question a better duplicate https://stackoverflow.com/questions/10421581/how-to-remove-border-from-specific-primefaces-ppanelgrid — Jasper de Vries, Aug 20 '20 at 07:10
@JasperdeVries its here: https://primefaces.github.io/primefaces/8_0/#/components/panelgrid?id=blank-mode — Melloware, Aug 21 '20 at 11:56
Thank you guys for your answers. I will try to test all that this morning, I don't have the environement with me now. I will be back with a feedback about the case — Hassan Jroundi, Aug 22 '20 at 12:58

score 2 · Accepted Answer · answered Aug 21 '20 at 11:56

2

https://primefaces.github.io/primefaces/8_0/#/components/panelgrid?id=blank-mode

To remove borders add ui-noborder style class to the component using styleClass attribute and to remove borders plus background color, apply ui-panelgrid-blank style.

answered Aug 21 '20 at 11:56

Melloware

10,435
2
32
62

Upvoted, but this is a duplicate of https://stackoverflow.com/questions/10421581/how-to-remove-border-from-specific-primefaces-ppanelgrid – Jasper de Vries Aug 21 '20 at 12:38

panelGrid border does not want to be hidden

1 Answers1