Info template and location when using a left region panel

AndyBurns · ‎03-30-2014

Hi

If i add a left region panel in my app my info template seems to pop up at random locations. It also shows the zoom box when you hold shift and draw a box in a different location to where the click is initiated.

I will paste some code and screens later when i boot up my other laptop but I was wondering if anyone has come across this before? If i use a right sided region div it has no problems.

thanks

BenFousek · ‎03-30-2014

Try resizing your BorderContainer after adding the region.

borderContainer.resize();

Any time you change the layout at the border container level you need to resize. For good measure, I resize right before creating the map and as the last thing called during initialization. If you add regions or show/hide regions you should resize as part of those operations too.

Those differences in location you're seeing are probably equal to (in pixels) the size of the region your adding. There's something about border containers with the map as center region that doesn't update when layout geometry changes. Where the map thinks it is on the screen and where it really is are different.

AndyBurns · ‎03-30-2014

I think you right with regards to the size of the div and the size of the offset the click thinks it is at.

My html is similar to this, i cant seem to get my other machine atm due to vpn issue but i took this as a base.

 <body class="claro">
    <div id="mainWindow" 
         data-dojo-type="dijit/layout/BorderContainer" 
         data-dojo-props="design:'headline', gutters:false" 
         style="width:100%; height:100%;">

      <div id="header" class="roundedCorners" 
           data-dojo-type="dijit/layout/ContentPane" 
           data-dojo-props="region:'top'">
        <span>
          This is the header section
        </span>
      </div>

      <div id="leftPane" class="roundedCorners" 
           data-dojo-type="dijit/layout/ContentPane" 
           data-dojo-props="region:'left'"
           style="width:275px;">
        This is the left section
      </div>

      <div id="centerPane" 
           data-dojo-type="dijit/layout/BorderContainer" class="roundedCorners" 
           data-dojo-props="region:'center', gutters:false">

        <div id="map" 
             data-dojo-type="dijit/layout/ContentPane" class="shadow" 
             data-dojo-props="region:'center'"
             style="position:absolute; overflow:hidden;">
        </div>
      <div>
        <div id="footer" class="roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">
          This is the footer section
        </div>
      </div>
    </div>
  </body>
</html>

BenFousek · ‎03-30-2014

You had an unnecessary div wrapping the footer. All non-center regions should have height or width set depending on top/bottom or left/right. Alternatively you can set the doLayout property to false. This will size the region to fit the content. This is most helpful for top/bottom regions. You had set position:absolute the map div. Center regions should never have position, width or height set (no region should have position property set). Let the border container do its job and handle position and sizing. Here's your markup as I would do it:

<div id="container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false, style:'width:100%;height:100%;'">
    <div id="header" class="roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top', style:'height:50px;'">
      This is the header section
    </div>
    <div id="left" class="roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left', style:'width:275px;'">
        This is the left section
    </div>
    <div id="center" data-dojo-type="dijit/layout/BorderContainer" class="roundedCorners" data-dojo-props="region:'center', gutters:false">
        <div id="map" data-dojo-type="dijit/layout/ContentPane" class="shadow" data-dojo-props="region:'center', style:'padding:0;overflow:hidden;'"></div>
        <div id="footer" class="roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', doLayout:false">
            This is the footer section
        </div>
    </div>
</div>

I added a height to the header and doLayout to the footer as examples.

AndyBurns · ‎03-30-2014

Hi Ben

Thanks for your reply.

As soon as i can get onto that machine properly i will take a look. I need to take a look into my positioning as functionality wise its working as required and i think perhaps bad habit but i have previously set my map divs to absolute...thanks for the explanation.

Javascript is not my strong point, python is my world and non ui so i always tend to be strong on function but lack on layout, design etc.

Can you please check back tomorrow on this thread? I will have a proper look into my layout and let you know my results. I can send you all my code as its all internal referenced so would not make sense here but obviously will keep this thread updated.

thanks

BenFousek · ‎03-30-2014

I suspect the absolute position on the map div may have been causing the problem.

Being a code guy, you may find it easier to create your layout with code rather than with markup. All my apps have nothing more than [HTML]<div id="container"></div>[/HTML] for markup. The rest is all code. Here and Here Simple examples but you get the idea. Be sure to check out the dojo docs for dijit/layout as it has good examples.

I'll certainly take a look at anything you post. Cheers.

AndyBurns · ‎03-31-2014

Still experiencing this issue!

 <div id="mainWindow" 
         data-dojo-type="dijit/layout/BorderContainer" 
         data-dojo-props="design:'headline', gutters:false" 
         style="width:100%; height:100%;">
      <div id="header"
           data-dojo-type="dijit/layout/ContentPane" 
           data-dojo-props="region:'top'"
           style:"height:50px;">
        <span>
          City Centre Forward Planning
        </span>
      </div>
      <div id="leftPane" 
           data-dojo-type="dijit/layout/ContentPane" 
           data-dojo-props="region:'left'"
           style="width:275px;">
           Legend
         <div id="tocDiv"></div>
      </div>
      <div id="centerPane" 
           data-dojo-type="dijit/layout/BorderContainer" 
           data-dojo-props="region:'center', gutters:false">
        <div id="mapDiv" 
             data-dojo-type="dijit/layout/ContentPane" class="shadow" 
             data-dojo-props="region:'center'"
             style="overflow:hidden;">  
        </div>
        <div id="footer" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom',doLayout:false">
          <div id="timeInfo">
            <div>City Centre Forward Planning works from <span id="daterange">2013 to 2024</span></div>
           <div id="timeSliderDiv"></div>
         </div>
       </div>
      </div>
      </div>

and the css im referencing, this is in adition to the usual js css.

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
font-family: "Trebuchet MS";
}
#header {
    background-color: #666666;
    border: 1px solid #ffffff;
    color: #ffffff;
    font-size: 21pt;
    font-weight: bold;
    height: 30px;
    overflow: hidden;
    padding: 15px;
    text-align: left;
}
#leftPane {
    background-color: #FAFAFA;
    border: 2px solid #B5BCC7;
    color: #666666;
}
#centerPane {
    border: medium none;
    width: 100%;
    height: 100%;
}
#footer {
    background-color: #666666;
    border: 2px solid #B5BCC7;
    color: #ffffff;
    font-size: 13pt;
    height: 78px;
    margin: 10px;
    padding: 10px;
    text-align: center;
}
.roundedCorners {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -o-border-radius: 4px;
}
#mapDiv {
    border: 10px solid #B5BCC7;
    margin: 5px;
}
.dijitBorderContainer, .dijitGutter {
    background-color: #D0EFF3 !important;
}
.shadow {
    background-color: #FFFFFF;
    border: 4px solid #B5BCC7;
    box-shadow: 0 6px 3px -3px #888888;
    padding: 8px;
}

It certainly is something to do with that left region div but i cannot track where, as soon as its in, even with no content it has the same issue!

Here is the click [ATTACH=CONFIG]32638[/ATTACH]

Without the positioning set on the mapDiv i get the map only populating the top half of the div.

BenFousek · ‎03-31-2014

Here's a fiddle of your layout. Seems fine to me. The only difference is I removed the height and width from the inner border container.

Perhaps there is something with your javascript.

AndyBurns · ‎03-31-2014

yeah, i went through the html over and over.

Any chance i can pm you my script and you can take a quick look over it to see if i have caused any issues in my javascript?

thanks

BenFousek · ‎03-31-2014

Go for it.