set columns in panelrid to specific width

Question

In my jsf page I have a panelGrid with 3 columns. In order to give those columns a certain witdh I used columnClasses attribute like this

    columnClasses="width20perc,width30perc,width50perc"

Then in my default.css :

    .width20perc
    {
    width: 40px !important;
    min-width: 15em !important;
    }

Normally I would use 20% there but in order to just change the width at least to some other value I used 40px instead. However not even this works... I'm not able to change the width of each column in any way. When I look at the source code of the table it says

    <td class=width20perc>

so the -elements DO have the right classes but when I inspect their css styles the do not inherit the styles I defined in my default.css . However they DO inherit the following font-size style which is also defined in my default.css so I think the stylesheet is loaded properly:

    .ui-widget,
    .ui-widget .ui-widget
    {
    font-size: 90% !important;
    }

I'm using primefaces 3.4.2 and I load my outputstylesheet in my default template like this :

    <h:head>
        <h:outputStylesheet name="css/default.css" />
          <ui:insert name="head">
             <title>Page title</title>
          </ui:insert>
    </h:head>

Can't reproduce your problem. An SSCCE would be helpful. In the meanwhile, carefully read http://stackoverflow.com/questions/8768317/how-do-i-override-those-classes-defined-in-primefaces-css/8774997#8774997 There are some things which can be done better. But still, that shouldn't have caused the particular problem based on the information provided so far (that's why I asked for an SSCCE; so that we can just copy'n'paste'n'run in a completely blank playground project to see it ourselves). — BalusC, Jan 31 '13 at 11:10
the problem was that I inserted the stylesheet in the head-Tag as you can see above... Now it put it in the body tag and it works. Thanks again!! +1 for your link — nico1510, Jan 31 '13 at 14:07

score 1 · Accepted Answer · edited May 23 '17 at 10:26

1

When overriding PrimeFaces styles, don't use the ugly !important hack. Just load your styles after the PrimeFaces styles. You can achieve this by putting the <h:outputStylesheet> inside the <h:body>.

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

set columns in panelrid to specific width

1 Answers1

See also: