Margin problem for IE7

[zjda]

I have two problems. The first one is that even I tried to set margin to 0 everywhere, there is still big margin between the panel and the form. The second one is that after I expand a tree node, it creates a extra space between the top of the tree and the form. The second problem is only on IE7. Any idea? Thanks,
-ZJ

 <h:panelGrid columns="2" columnClasses="colNav, colContent" width="100%">
 <rich:panel id="navPanel" style="vertical-align:top; margin:0px; padding:0px; background-color: green; height:450px; overflow: auto;">
 <rich:dragIndicator id="treeindicator"/>
 <h:form id="treeform" style="vertical-align:top; margin:0px; padding:0px; background-color: blue">
 <rich:tree id="navtree" switchType="ajax" 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>
 </rich:panel>

 <rich:panel id="mainFrame" style="vertical-align:top;margin:0px; padding:0px; background-color: green; height:450px; overflow: auto;">
 </rich:panel>
 </h:panelGrid>

[bigbaray]

here is 2 cents

have you tried this in your css

form {
margin: 0;
padding: 0;
}

?

[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

[bigbaray]

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.

[bigbaray]

/*removing form padding, which by default is present in IE and Opera*/
form {
margin: 0;
padding: 0;
}

[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

[bigbaray]

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.

[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

[nbelaevski]

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 &lt;DIV style=\\'height: 50px;\\'&gt;DIV 2&lt;/DIV&gt; ';">
 DIV
 </div>
 </h:form>

- click the DIV text. As a workaround you can add

style="zoom: 1;"

to the rich:tree component.

[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

[sergeysmirnov]

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.

[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

[nbelaevski]

ZJ,

You can remove default 10px padding of rich:panel's body by using "rich-panel-body" style class.

[zjda]

Thanks nbelaevski,

Perfect! Overwriting padding of rich:panel in rich-panel-body solves the problem.

-ZJ