CODEWITHSUNDEEP
javacssjsfprimefaces
z22
z22

Reputation: 10083

primefaces components not working with own css

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>

Upvotes: 2

Views: 12292

Answers (1)

BalusC
BalusC

Reputation: 1109735

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>

See also:

Update: As per your update, your CSS doesn't seem to be loaded at all. You should have noticed this by verifying the HTTP traffic in browser builtin webdeveloper toolset (press F12 in Chrome/IE9/Firebug) and seeing that it returned a HTTP 404 error. When using <h:outputStylesheet> you need to put the CSS file in the /resources folder of the webcontent. So you must have a /resources/css/mycss.css in order to be able to use <h:outputStylesheet name="css/mycss.css" />.

See also:

Upvotes: 5

Related Questions