primefaces components not working with own css

Question

i am using ready-made template(with css and j-queries) in my java ee app. all the primefaces components are rendered properly except the panelgrid control of primefaces 3.2. it is displayed with border. i want it without border. i have removed all the table styling from the css of custom ready-made template. still the border is there. when i remove the readymade template, the panelgrid is rendered perfectly without any border. how do i remove the border and what is the cause of this problem?

edited: xhtml file:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">

<h:head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AP administration panel - A massive administration panel</title>



</h:head>

<h:body>

    <div>
    <h:form>
        <p:panelGrid columns="2" style="border: none">
        <h:outputText value="scrip symbol"/>
        <p:inputText value=""/>
        <p:commandButton value="submit"/>
        </p:panelGrid>

    </h:form>


    </div>




</h:body>

</html>

Please check if this answer doesn't already answer your question: http://stackoverflow.com/questions/10421581/remove-border-from-panelgrid/10421651#10421651 — BalusC, Jun 07 '12 at 17:59
i saw the link but i havent applied any style class to the panel grid and as the link answer says , i checked in firebug that .ui-widget-content class of primefaces css is by default applied to the panel grid, how do i modify it? it is readonly! — z22, Jun 07 '12 at 18:19
So you want to override the default style of `` *throughout the entire application*? And thus not only for one or more specific ``s? — BalusC, Jun 07 '12 at 18:20
well i dont want to override it, i want to keep it as it is(without the border), but when i apply my custom css, the grid comes with border, i dont know why, and i want to remove this border — z22, Jun 07 '12 at 18:21
I didn't ask that. Please re-read the question. Do you want to apply the style override to **all** panelgrids or only to specific ones? — BalusC, Jun 07 '12 at 18:21

score 5 · Accepted Answer · edited May 23 '17 at 10:32

5

When overriding PrimeFaces default styles, you have to specify a CSS selector of at least the same strength or to specify a stronger selector. The strength of a CSS selector (the cascading rules) is specified in the W3 CSS specification and clearly explained in this article: Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade.

Based on PrimeFaces own CSS, the following selectors should do:

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

Just put them in a .css file which you include by <h:outputStylesheet> inside the beginning of the <h:body> so that it will be included after PrimeFaces own style.

<h:body>
    <h:outputStylesheet name="layout.css" />
    ...
</h:body>

Works just for me. Where exactly is `css/mycss.css` file placed? It's placed in the `/resources` folder of the webcontent, right? See also http://stackoverflow.com/questions/8367421/how-to-reference-resource-in-facelets-template/8368727#8368727 – BalusC Jun 07 '12 at 18:45
its placed in WebPages(the default folder for all web pages)/css(folder creaetd by me to keep all the css) – z22 Jun 07 '12 at 18:47
That won't work with ``. You have to create a `/resources` folder and put the `css/mycss.css` in there. Please follow the "see also" link in my previous comment for more detail. Otherwise you have to use the old fashioned HTML `` element and worry about the context path. – BalusC Jun 07 '12 at 18:47
did so, the panelgrid continues to display its border with a difference that the border is displayed only around the cells(of panelgrid) where some componenets(buttons, textbox,etc) are placed and the the whole template also gets distorted. – z22 Jun 07 '12 at 18:52
It's perhaps PF 3.2 specific. I don't have a PF 3.2 playground environment right now. I was using PF 3.3, you might want to upgrade it as well. It's already final for some weeks now. At least the answer should bring new insight in how CSS inheritance works. – BalusC Jun 07 '12 at 18:55
oh i want to switch to 3.3 but due to some reasons i cant so i guess i have use tag instead of primefaces panelgrid(i know it sounds stupid but i have no other choice left and it wont take much time as i have 4 or 5 panelgrids)
– z22 Jun 07 '12 at 19:00
Are you using tables for layout? :o Anyway, please update your question to show the smallest possible **but complete** XHTML file and CSS file which still reproduces the problem by just copypasting it into a blank playground environment. – BalusC Jun 07 '12 at 19:00
i have edited my question to include what you asked,pls ask if you wish to see all the css files – z22 Jun 07 '12 at 19:11
But I can't copy'n'paste'n'run it without it to error about all those other missing styles and scripts... Are those really relevant? I.e. the problem disappears when you remove them? If not, then just keep them out the snippet. I was asking for a snippet which I can just fully copy'n'paste'n'run without making any changes in order to see the problem myself (and you also for yourself). Just create new XHTML and CSS files and test it yourself as well. Once you've the smallest possible sample "working" (i.e. it reproduces the problem without any other necessary changes), copypaste it in question. – BalusC Jun 07 '12 at 19:14
edited the code,i removed all the css, still the same problem, pls copy paste it and run – z22 Jun 07 '12 at 19:35
Better, but the `` and CSS file is missing. – BalusC Jun 07 '12 at 19:37
yes but if you look at the code then i have removed all css stuff, then also the border is displayed – z22 Jun 07 '12 at 19:39
Ah right, it's indeed been included before PrimeFaces own style. Move the `` to inside the `` and it'll be included *after* PrimeFaces own style. – BalusC Jun 07 '12 at 19:44

primefaces components not working with own css

1 Answers1

See also:

See also: