13 Replies Latest reply on Jan 21, 2009 12:36 PM by ZJ DA

    Margin problem for IE7

    ZJ DA Newbie

      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>
      
      


        • 1. Re: Margin problem for IE7
          Brian Ray Newbie

          here is 2 cents

          have you tried this in your css

          form {
          margin: 0;
          padding: 0;
          }

          ?

          • 2. Re: Margin problem for IE7
            ZJ DA Newbie

            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
              Brian Ray Newbie

              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
                Brian Ray Newbie

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

                • 5. Re: Margin problem for IE7
                  ZJ DA Newbie

                  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
                    Brian Ray Newbie

                    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
                      ZJ DA Newbie

                      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
                        Nick Belaevski Master

                        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.

                        • 9. Re: Margin problem for IE7
                          ZJ DA Newbie

                          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
                            Sergey Smirnov Master

                            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
                              ZJ DA Newbie

                              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
                                Nick Belaevski Master

                                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
                                  ZJ DA Newbie

                                  Thanks nbelaevski,

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

                                  -ZJ