PrimeFaces panel style contents CSS

Question

I am tyring to style a ui-panel-content without success, here is the CSS I am applying

.loginPanel.ui-panel-content {
        border: 0;
        background: red;
        padding: 0.5em 1em;

Also tried:

.loginPanel.ui-panel, .loginPanel.ui-panel-content {
    border: 0;
    background: red;
    padding: 0.5em 1em;

But this turns the whole panel Red

Here is the outputted HTML I am trying to target:

<div id="j_idt9:loginPanel" class="ui-panel ui-widget ui-widget-content ui-corner-all loginPanel">
    <div id="j_idt9:loginPanel_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
        <span class="ui-panel-title">Login</span>
    </div>

    <div id="j_idt9:loginPanel_content" class="ui-panel-content ui-widget-content">

        <table id="j_idt9:loginPanelGrid" class="ui-panelgrid ui-widget loginPanelGrid" role="grid">
            <tbody>
                <tr class="ui-widget-content" role="row">
                    <td role="gridcell">Username</td>
                    <td role="gridcell">
                        <input id="j_idt9:username" name="j_idt9:username" type="text" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false">
                    </td>
                </tr>

                <tr class="ui-widget-content" role="row">
                    <td role="gridcell">Password</td>
                    <td role="gridcell">
                        <input id="j_idt9:password" name="j_idt9:password" type="password" class="ui-inputfield ui-password ui-widget ui-state-default ui-corner-all" role="textbox" aria-disabled="false" aria-readonly="false" aria-multiline="false">
                    </td>
                </tr>

                <tr class="ui-widget-content" role="row">
                    <td role="gridcell">
                        <button id="j_idt9:j_idt14" name="j_idt9:j_idt14" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="statusDialog.show();PrimeFaces.ab({source:'j_idt9:j_idt14',update:'j_idt9:growlID',oncomplete:function(xhr,status,args){statusDialog.hide();}});return false;" type="submit" role="button" aria-disabled="false">
                            <span class="ui-button-text">Submeter</span>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div id="j_idt9:loginPanel_footer" class="ui-panel-footer ui-widget-content">V.1.0</div>
</div>

Any ideas how to set that

Update: Here is the source

<div class="loginFromContainer">
    <h:form>
        <p:growl id="growlID">

        </p:growl>
        <p:panel id="loginPanel" styleClass="loginPanel" header="Login SRB Armazem" footer="V.1.0">
            <p:panelGrid id="loginPanelGrid" columns="1" styleClass="loginPanelGrid">
                <h:outputText value="Username" />
                <p:inputText id="username" value="#{loginController.userName}" />
                <h:outputText value="Password" />
                <p:password id="password" value="#{loginController.passWord}" />
                <p:commandButton value="Submeter" update="growlID" onclick="statusDialog.show()" oncomplete="statusDialog.hide()" actionListener="#{loginController.verifyLogin(event)}" action="#{loginController.decideRedireccionar()}" />
            </p:panelGrid>
        </p:panel>
    </h:form>

Please paste your xhtml files source here not the rendered html from your browser. and because you have specified `background: red; ` your panel is red! what kind of style exactly you want to give to your panel. — Mehdi, Aug 28 '12 at 18:10
The issue is that i can't access the container from the class since I can't put an ID in it. I have thus far given up on the idea. — Astronaut, Aug 29 '12 at 11:54
of course. updated with source code, any ideas would be great! — Astronaut, Aug 29 '12 at 23:47

score 0 · Answer 1 · answered Sep 12 '12 at 10:18

I gave up on the idea of Panels and use divs that I can freely format as I wish... Still a lot of stuff is missing from these face components to make Layout and Positioning as simple as it is using DIVs, SPANs and CSS... still a lot of use of Tables just to make things lineup.

score -2 · Answer 2 · answered Aug 30 '12 at 02:19

-2

If you don't want jsf to prepend form id to it's child elements use this property in your form element :

<h:form prependId='false'>

Then you can access your elements by their ID.

answered Aug 30 '12 at 02:19

Mehdi

4,396
4
29
30

Ok ill give that a try. But the issue is that the panel generates 4 divs a container div and 3 row divs: a header, a content and a footer, and I don't have access to those divs in particular, but ill try to use that. – Astronaut Aug 30 '12 at 09:03

PrimeFaces panel style contents CSS

2 Answers2