CODEWITHSUNDEEP
cssjsf
Eric C.
Eric C.

Reputation: 3368

Apply styleClass to parent panelGrid element and not to children

I'm trying to apply a styleClass to a h:panelGrid without applying it to its children:

<h:panelGrid id="mainPanelGrid" columns="2" width="100%" styleClass="topAligned" >
    <p:fieldset id="fs1" legend="fs1" style="width: max-content">  
        <h:panelGrid columns="3">
            <p:outputLabel for="id1" value="#{messages.label_application}" />
            <p:selectOneMenu id="id1" required="true" value="som">
                <f:selectItem itemLabel="#{messages.label_select}" noSelectionOption="true" />  
                <f:selectItems value="#{bean.availableItems}" />
            </p:selectOneMenu>
            <p:message for="id1" />
        </h:panelGrid>             
    </p:fieldset>  

     <p:fieldset id="fs2" legend="fs2" style="width: max-content">  
         <h:panelGrid columns="3">
             <!--more fields-->     
         </h:panelGrid>  
     </p:fieldset>
</h:panelGrid>

My topAligned css:

.topAligned td{
    vertical-align: top !important;
}

The problem is that I need to top align the two fieldset and that works well with the styleClass I apply, but it also applies this styleClass to all the children. Therefore, all the fields (outputLabel, selectOneMenu, etc...) of the two fieldset get top aligned too...

I tried all the different ways to specify the top alignment from this question but without success... I also tried to look at the html source but it gets a bit confusing with all the jsf and primefaces stuff...

If you know a trick that will work...

Upvotes: 1

Views: 921

Answers (1)

BalusC
BalusC

Reputation: 1108742

With

.topAligned td{
    vertical-align: top !important;
}

and the JSF-generated HTML output

<table class="topAligned">
    ...
</table>

you're basically applying the style on every single <td> element of the <table>, also those of the nested <table>s.

If you want to apply the style on only the immediate <td> elements of the parent <table>, then you should be using columnClasses attribute instead:

<h:panelGrid ... columnClasses="topAligned,topAligned">

with

.topAligned {
    vertical-align: top;
}

This will end up in the generated HTML output as follows:

<table>
    <tbody>
        <tr>
            <td class="topAligned">...</td>
            <td class="topAligned">...</td>
        </tr>
    </tbody>
</table>

and not be applied on the <td>s of the nested <table>s.

Note that I also removed the nonsensicial !important workaround. It's supposed to be used only when you want to override a hardcoded style by an external CSS style.

Also note that this problem is not specifically related to JSF. JSF is in the context of this question merely a HTML code generator. You'd have had exactly the same problem when dealing with "plain vanilla" HTML/CSS. The problem is more in the lack of familiarity with basic HTML and CSS. On http://htmldog.com you can find decent HTML/CSS tutorials.

Upvotes: 2

Related Questions