Composite Component And CSS

I have newcss.css #formdiv { width: 30%; margin: 150 auto; } and composite component

Solution 1:

The problem you have is the composite component itself is setting a prefix to your form's id. If you use your h:form directly in your main page, you'll see the form id value is formdiv at client side (and consecuently properly acquiring its style).

However, when you use a composite, JSF stablishes an id for the composite itself, so for your form you'll have j_idtx:formdiv. The easiest way to go is to use style classes instead of css selectors:

.formdivClass {
    width: 30%;
    margin: 150px auto;
}

<composite:implementation>
   <h:form styleClass="formdivClass">
     ...
   </h:form>
</composite:implementation>

See also:

• What's the generated prefix j_idt33 in JSF component id?
• How to use JSF generated HTML element ID with colon ":" in CSS selectors?

Solution 2:

The problem is you set an invalid value for the margin property, so the browser ignores it. You have to specify the unit on the numeric value, unless it is zero. So in this case you could fix it this way (if you want 150 pixels of top and bottom margin):

#formdiv {
    width: 30%;
    margin: 150px auto;
}

Share