Composite component and CSS

Question

I have newcss.css

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

}

and composite component

<?xml version='1.0' encoding='UTF-8' ?>
<!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://xmlns.jcp.org/jsf/html"
      xmlns:composite="http://java.sun.com/jsf/composite">
    <composite:interface>
    </composite:interface>
    <composite:implementation>
             <h:form id="formdiv">
                 ...
             </h:form>
    </composite:implementation>
</html>

When i'm trying to use this component in index.xhtml i cant observe any effects of CSS applying.

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:lpform="http://xmlns.jcp.org/jsf/composite/mycomp"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <form>
        <mycomp:comp/>
    </form>
</html>

I need that my composite component lay at the center.

score 3 · Accepted Answer · edited May 23 '17 at 10:32

3

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:

edited May 23 '17 at 10:32

Community

1
1

answered Nov 30 '13 at 13:33

Aritz

30,971
16
136
217

It doesnt work. I dont understand, why. For what is needed? – Nov 30 '13 at 14:04
Remove the output style sheet tag from your composite and let it only in your main page. It's required for jsf to know which css files to include. – Aritz Nov 30 '13 at 14:16
Also about [that](http://stackoverflow.com/questions/20300578/css-style-doesnt-work-with-composite-component), don't post twice the same topic. Your questions will be marked as duplicated and removed. It's better to edit the same question adding new content, in order to get it relevanced again. – Aritz Nov 30 '13 at 17:51

score 0 · Answer 2 · answered Nov 30 '13 at 12:30

0

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;
}

answered Nov 30 '13 at 12:30

Carlo Cannas

3,206
19
22

This was an error for sure, but there could be some other elsewhere. Could you please provide the URL of the actual page, or at least its code (as given to the client)? – Carlo Cannas Nov 30 '13 at 12:43
http://stackoverflow.com/questions/20300578/css-style-doesnt-work-with-composite-component – Nov 30 '13 at 13:30

Composite component and CSS

2 Answers2

Related