Announcement Announcement Module
Collapse
No announcement yet.
Div replacement Page Title Module
Move Remove Collapse
X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • Div replacement

    Hello everyone. I have a question that might not be stricly roo related, but it's about an issue with my current roo project, so I'll try.

    If I am to understand it correctly, the layout/default.jspx provides the page layout, in my case:

    Code:
    <body class="tundra spring">
       		<div id="wrapper">
    		    <tiles:insertAttribute name="header" ignore="true" />
    		    <div id="main">
    	    		<tiles:insertAttribute name="body"/> 
    		    	<tiles:insertAttribute name="footer" ignore="true"/>
    		    </div>
    		</div>
    	</body>
    Basically I just removed the menu tile.
    Next, I have a index.jspx with a:

    Code:
    <util:panel id="title" title="${title}">
    I edited the panel.tagx, like so:

    Code:
    <script type="text/javascript">dojo.require('dijit.TitlePane');</script>
        <div id="_title_${sec_id}_id">
          <script type="text/javascript">Spring.addDecoration(new Spring.ElementDecoration({elementId : '_title_${sec_id}_id', widgetType : 'dijit.TitlePane', widgetAttrs : {title: '${sec_title}', open: ${sec_openPane}}})); </script>
          <div id="legendcontainer" style="overflow: visible; width: 220px; height: 20px;" >
          	<div id="buypralegend">Legend:</div>
          	<div id="calegend">Legend:</div>
          </div>
          <div id="chartNodeContainer" style="float:left; overflow: visible; width: 220px; height: 300px;" >
          	<div id="buyprachartnode"></div>        	    
          	<div id="cachartnode"></div>        	    
          </div>
          <jsp:doBody />
        </div>
    Basically I added div containers for two legends and pie charts. These placeholder divs get replaced by the actual legends and pies successfully.

    What I noticed tho is this, from the previously linked default.jspx I see that the body and footer tiles are at the same level inside the "main" div. The body tile creates the div
    Code:
    <div id="_title_${sec_id}_id">
    , so I expected the footer to be inside the "main" div right below it, but it's not, it ends inside the "body" div.
    The final div tree structure is:

    Code:
    <div id="main">
    <div version="2.0"> // as generated by index.jspx
    <div id="_title_title_id" widgetid="_title_title_id" title="" role="group" class="dijitTitlePane"> //as generated by panel.tagx called inside index.jspx
    // a series of other divs, then mine	
    <div style="overflow: visible; width: 220px; height: 20px;" id="legendcontainer">...</div>
    <div style="float:left; overflow: visible; width: 220px; height: 300px;" id="chartNodeContainer">...</div>
    <div version="2.0" id="footer">...
    Here is the issue, the footer div ended up at the same level as the divs I added inside panel.tagx, much below the div tree structure where I was expecting it to be.

    Am I doing something very stupid here?

    Thanks all, as always!
    TD

  • #2
    I just noticed that this happens with other divs as well, for example:

    Code:
    <div id="chartNodeContainer" style="float:left; overflow: visible; width: 220px; height: 300px;" >
          	<div id="buyprachartnode"></div>        	    
          	<div id="cachartnode"></div>        	    
          </div>
    The buyprachartnode and cachartnode divs start at the same level, but after having connected the pies to them they end one inside the other:

    Code:
    <div id="buyprachartnode">
         <div style="margin: 0px; padding: 0px; border-width: 0px; width: 0px; height: 0px;"></div>
         <div id="cachartnode">
              <div style="margin: 0px; padding: 0px; border-width: 0px; width: 0px; height: 0px;"></div>
         </div>
    </div>

    Comment


    • #3
      The solution was to put a blank char inside the div, like this:
      &#160;

      Comment

      Working...
      X