How to remove the header from a p:panel?

Question

Hello i've been exercising in Primefaces and got stuck with the UI , i don't know if I'm weak in CSS or i haven't yet familiarized with the library of primefaces.

IMAGE1

As you can see in the image i wanted to make the separator fully fitted to the panel(IMAGE1). I also wanted to make the header which contains "data" to be not visible. I've already tried to delete the header="data", but it will be not having a top border of the panel(IMAGE2).

IMAGE2

Here's the code

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="content">

        <p:panel style="border:none;">
            <!--        FROM HERE-->  

            <h:form id="form">
                <p:dataGrid var="jab" value="#{homeMBean.listJabatan}" columns="3" layout="grid"
                            rows="12" paginator="true" id="jabatanid"
                            paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                            paginatorPosition="bottom"
                            rowsPerPageTemplate="6,12,16" style="border:none;">

                    <p:panel header="data" style="text-align:center;border-width: 0">
                        <h:panelGrid columns="1" style="width:100%" > 

                            <h:outputText value="#{jab.jabatanAdministrasi}" />
                            <h:outputText value="#{jab.jabatanKppn}" />
                            <h:outputText value="Aktif" rendered="#{jab.active eq true}"/>
                            <h:outputText value="non aktif" rendered="#{jab.active eq false}"/>
                            <p:separator style="margin-left: 0px" />
                        </h:panelGrid>
                    </p:panel>

                </p:dataGrid>

            </h:form>
            <!--TO HERE-->
        </p:panel>
        
                    
    </ui:define>
</ui:composition>

score 1 · Answer 1 · answered Oct 14 '20 at 07:13

This requires a better knowlegde of CSS development. You need to dig deeper, which would lead you to a style rule set by the theme:

body .ui-panel .ui-panel-content {
  border-top: 0 none;
}

You need to override that style as explained in How do I override default PrimeFaces CSS with custom styles?

Also, if you want to use a headerless panel consistently, I would advise to styleClass the panel to make it reuseable. Or simply use a h:panelGroup or a div with a class, because basically you are after a (rendered) div with a border and some padding.

Martin Volek · Answer 2 · 2020-10-14T13:15:15.700

0

Just remove header="data"

and replace your style something like that

<p:panel style="text-align:center;border:1px solid #d8d8d8;">

the header will disappear and the border will remain.

edited Oct 14 '20 at 13:15

answered Oct 14 '20 at 13:10

Martin Volek

315
2
13

This will give you an extra border on the panel content, which already has a border at the left and the right side. – Jasper de Vries Oct 15 '20 at 07:34
So you can just use border-top:1px solid #d8d8d8; instead, but I tried that and it does not looks like you describe, have you tried that? – Martin Volek Oct 16 '20 at 07:02
No, you need to override the `body .ui-panel .ui-panel-content` rule, and there set the top border. – Jasper de Vries Oct 16 '20 at 07:05
This will override the css rule. Component style in xhtml has a bigger priority -> you don't need to override file css rule. – Martin Volek Oct 16 '20 at 07:31
It will set the style to the outer `div` rendered by the `p:panel`, not to the panel content. Try it. I did. It doesn't work. – Jasper de Vries Oct 16 '20 at 07:35

How to remove the header from a p:panel?

2 Answers2