Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
936 views
in Technique[技术] by (71.8m points)

html - Composite component and CSS

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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:


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...