复合组件和CSS [英] Composite component and CSS
问题描述
我有 newcss.css
#formdiv {
宽度：30％;
保证金：150汽车;
$ b $复合成分
<？xml version ='1.0'encoding ='UTF-8'？>
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://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：表格>
< / composite：implementation>
< / html>
当我试图在 index.xhtml code>我无法观察 CSS 应用的任何效果。
< 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>
我需要我的复合组件位于中心位置。
解决方案您遇到的问题是复合组件本身正在为表单的ID设置前缀。如果您在主页面直接使用 h：form ，您会看到表单id值为 formdiv at客户端（并且正确地获得其风格）。然而，当你使用组合时，JSF为组合本身建立一个id，所以对于你的表单，你将有 j_idtx：formdiv / code>。最简单的方法是使用样式类而不是css选择器：
$ b
.formdivClass {
width：30％;
margin：150px auto;
<复合：执行>
< h：form styleClass =formdivClass>
...
< / h：表格>
< / composite：implementation>
另请参阅：
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.
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?
这篇关于复合组件和CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
