-
1. Re: Margin problem for IE7
bigbaray Jan 20, 2009 4:50 PM (in response to zjda)here is 2 cents
have you tried this in your css
form {
margin: 0;
padding: 0;
}
? -
2. Re: Margin problem for IE7
zjda Jan 20, 2009 5:11 PM (in response to zjda)Thanks, I tried:
.form { margin: 0; padding: 0; background-color: blue; vertical-align:top; } ... <h:form id="treeform" styleClass="form">
But it did no make any difference.
-ZJ -
3. Re: Margin problem for IE7
bigbaray Jan 20, 2009 5:19 PM (in response to zjda)Try it just as is. so that it gets all forms.
remove the '.' and don't declare it in your jsf form. Just slap in what I posted into your css. -
4. Re: Margin problem for IE7
bigbaray Jan 20, 2009 5:20 PM (in response to zjda)/*removing form padding, which by default is present in IE and Opera*/
form {
margin: 0;
padding: 0;
} -
5. Re: Margin problem for IE7
zjda Jan 20, 2009 5:58 PM (in response to zjda)Hi, I did exactly what you suggested:
<style> .colNav { vertical-align: top; width: 25%; padding: 0px; margin: 0px; } .colContent { vertical-align: top; width: 75%; padding: 0px; margin: 0px; } form { margin: 0; padding: 0; } </style> ... <rich:panel id="navPanel" style="vertical-align:top; margin:-10px; padding:0px; background-color: green; height:450px; overflow: auto;"> <rich:dragIndicator id="treeindicator"/> <h:form id="treeform">
But it did not help. I think the margin between panel and form is caused by panel margin. If I set the panel margin to -10px as shown in above code, the margin is gone. However, there still is the extra space between the top of the tree and form created after expanding a tree node.
Thanks,
-ZJ -
6. Re: Margin problem for IE7
bigbaray Jan 20, 2009 6:04 PM (in response to zjda)Dang. I had to use my fix for some other form padding issues.
Cool that -10 works for you, but does it cause a problem in FireFox? Hopefully it wont be an issue. -
7. Re: Margin problem for IE7
zjda Jan 20, 2009 6:29 PM (in response to zjda)Unfortunately, -10 does not work for FireFox which causes the panel overlapped with other panels. We have to find a different solution.
For my second problem, if I add another component (<h:outputText>) before the tree in the form as shown in the following code , the tree will not move down after expanding a tree node which causes the extra space.<h:form id="treeform"> <h:outputText>Navigator</h:outputText> <rich:tree id="navtree" switchType="ajax" reRender="mainFrame" style="vertical-align:top; margin-top:0px; padding:0; background-color: red"> <rich:recursiveTreeNodesAdaptor roots="#{simpleTreeDndBean.root}" var="item" nodes="#{item.subNodes}"> <rich:treeNode id="treeNode-#{item}" acceptedTypes="node" dragType="node" dragValue="#{item}" dropValue="#{item}" dragIndicator=":treeindicator" dropListener="#{simpleTreeDndBean.processDrop}"> <rich:dndParam name="label" type="drag" value="#{item}" /> <h:outputText value="#{item.name}" /> </rich:treeNode> </rich:recursiveTreeNodesAdaptor> </rich:tree> </h:form>
Thanks,
-ZJ -
8. Re: Margin problem for IE7
nbelaevski Jan 20, 2009 8:37 PM (in response to zjda)Hello,
1. Use<h:panelGroup id="navPanel" layout="block" style="vertical-align:top; margin:0px; padding:0px; background-color: green; height:450px; overflow: auto;">
instead of rich:panel
2. Looks like IE bug. The same issue with:<h:form style="vertical-align:top; margin:0px; padding:0px; background-color: blue;"> <div onclick="this.innerHTML = 'DIV <DIV style=\\'height: 50px;\\'>DIV 2</DIV> ';"> DIV </div> </h:form>
- click the DIV text. As a workaround you can addstyle="zoom: 1;"
to the rich:tree component. -
9. Re: Margin problem for IE7
zjda Jan 20, 2009 10:39 PM (in response to zjda)Thanks, your solutions work!
If I use h:panelGroup to replace rich:panel, however, the look&feel of the tree is different from other parts of the page. Is it possible for h:panelGroup to user richfaces predefined css? I tried<h:panelGroup id="navPanel" styleClass="rich-panel" style="vertical-align:top; margin:0px; padding:0px; height:450px; width:100%; overflow: auto;">
and<h:panelGroup id="navPanel" styleClass="rich-panel-body" style="vertical-align:top; margin:0px; padding:0px; height:450px; width:100%; overflow: auto;">
but none of them worked.
Regards,
-ZJ -
10. Re: Margin problem for IE7
sergeysmirnov Jan 20, 2009 11:29 PM (in response to zjda)h:panelGroup is rendered to the span. Ie it is a inline tag.
rich:panel is rendered to the div. I.e. it is a block tag.
Some attributes of the block tag have no make any sense for inline tag.
add "display:block;" to the beginning of style attribute.
P.S. In general, html standard does not allow to have a block tags inside the inline tag. It is an invalid combination, so browser try to correct it while the DOM is created. Each browser has own way how to make a correct. The result may vary depends of browser and declared DOCTYPE.
Conclusion: follow the standard. Check you page with w3c validator if you are not sure. -
11. Re: Margin problem for IE7
zjda Jan 21, 2009 12:14 AM (in response to zjda)Thank you for your explanation. I added "display:block;", but it does not help on IE. I will create a css for h:panelGroup to better match with rich:panel or simply use rich:panel with the margin.
Regards,
-ZJ -
12. Re: Margin problem for IE7
nbelaevski Jan 21, 2009 6:55 AM (in response to zjda)ZJ,
You can remove default 10px padding of rich:panel's body by using "rich-panel-body" style class. -
13. Re: Margin problem for IE7
zjda Jan 21, 2009 12:36 PM (in response to zjda)Thanks nbelaevski,
Perfect! Overwriting padding of rich:panel in rich-panel-body solves the problem.
-ZJ