How to remove a specific (bottom) border from p:row in p:panelGrid?


Tags: css,jsf,primefaces,jsf-2.2

Problem :

I need to remove only a bottom border as displayed by <p:row> in <p:panelGrid>. I attempted the following.

CSS :

.panelgrid-cell-noborder.ui-panelgrid .ui-panelgrid-cell {
    border-bottom: none;
}

XHTML :

<p:panelGrid style="width: 100%;">
    <p:row>
        <p:column>a</p:column>
        <p:column>b</p:column>
    </p:row>

    <p:row>
        <p:column styleClass="panelgrid-cell-noborder">c</p:column>
        <p:column styleClass="panelgrid-cell-noborder">d</p:column>
    </p:row>

    <p:row>
        <p:column>e</p:column>
        <p:column>f</p:column>
    </p:row>
</p:panelGrid>

The bottom border from the middle row is expected to be removed but it does not.

How to remove the bottom border from the middle row, in this example?



Solution :

Every cell has border in this case by default, so you should cancel bottom border and top border of the row below:

XHTML:

<p:panelGrid style="width: 100%;">
    <p:row>
        <p:column>a</p:column>
        <p:column>b</p:column>
    </p:row>

    <p:row>
        <p:column styleClass="panelgrid-cell-noborder-bottom">c</p:column>
        <p:column styleClass="panelgrid-cell-noborder-bottom">d</p:column>
    </p:row>

    <p:row>
        <p:column styleClass="panelgrid-cell-noborder-top">e</p:column>
        <p:column styleClass="panelgrid-cell-noborder-top">f</p:column>
    </p:row>
</p:panelGrid>

CSS:

.ui-panelgrid .ui-panelgrid-cell.panelgrid-cell-noborder-bottom {
    border-bottom: none;
}
.ui-panelgrid .ui-panelgrid-cell.panelgrid-cell-noborder-top {
    border-top: none;
}

Also, your CSS was incorrect, you put ui-panelgrid together with the cell style, check that in my example too.

Edit:

You'll probably have to override theme styles too if you have them by default, because there are borders defined in both theme and primefaces styles, you could try adding this for example:

/* cancel border defined in aristo theme */
.ui-panelgrid .ui-widget-content{
    border: none;
}
/* extra: you can add this if you want to recover the same color you cancelled above  */
.ui-panelgrid .ui-panelgrid-cell {
    border: 1px solid #a8a8a8;
}

    CSS Howto..

    How does reveal.js resize elements?

    How to get the text in the custom dialog to be centered vertically

    How to show only the div with id while hiding other divs using CSS only

    How to remove the blank between div.sons?

    How to style an anchor tag to look like a button with the same height as the button?

    CSS: Checkbox with Border. How to get Space between Border and Content?

    How can I make it so that CSS uses a class only if another is not present on an element?

    how to fix height:auto css

    How to make responsive text that isn't too large or too small

    How to make a caret in a link change color when the LINK is hovered over?

    How can I center div, inside other div with bootstrap classes?

    jQuery - how do I show the full navbar at certain width?

    CSS Dropdown menu: How to make absolute positioned sub nav line up perfectly

    How to get the CSS width of a mobile device in ASP.NET MVC?

    How to assign a unique CSS id to each cell in a jqGrid?

    Using Bootstrap, how do i achieve this horizontal tab layout? [closed]

    How to add multiple style rules to css pseudo elements using js?

    android - How to build complex views that stretch?

    Angular Material Flexbox - How to add margin between wrapped rows?

    How do I achieve a fully working image scrolling effect like in this example?

    How to make compatibale a css design for all the browsers?

    CSS- How'd they do that without Absolute Positioning and Z-index?

    How to use :before for the third
  • element?
  • How can I edit CSS on an HTML tab?

    How to create a border with spaces in it [duplicate]

    How can I make inputs display inline?

    How to make 3-corner-rounded triangle in CSS

    How to link an image in input text box using css

    How can I use JQuery to replace CSS background image and maintain gradient?

    How to format XML file with CSS?