Opened 10 years ago

Closed 10 years ago

#12351 closed defect (duplicate)

bordercontainer with liveSplitters doesn't draw correctly on page load in Chrome

Reported by: dickb Owned by:
Priority: high Milestone: tbd
Component: Dijit Version: 1.6.0rc1
Keywords: Cc:
Blocked By: Blocking:

Description

I've got a layout with bordercontainer with three content-panes and live splitters.

Open the html in Chrome 9.0.597 and find that you need to size the window to get a correct display. It's fine in FF 3.6 and IE 8.

Apparently newly broken in 1.6.

There's also an odd redraw artefact with a large blue rectangle if you drag just to one side of a slider, in FF and Chrome. 

<html>
<head>

<script type="text/javascript" src="dojo-release-1.6.0rc1-src/dojo/dojo.js" djConfig="parseOnLoad: true">
</script>                                                                                                   

<script type="text/javascript">
    dojo.require("dijit.layout.ContentPane");
    dojo.require("dijit.layout.BorderContainer");
</script>


<link rel="stylesheet" type="text/css" href="dojo-release-1.6.0rc1-src/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css" href="dojo-release-1.6.0rc1-src/dijit/themes/claro/claro.css" />

<body class="claro">

<div dojoType="dijit.layout.BorderContainer" style="width: 100%; height: 90%;" id="main_content" liveSplitters="true">

    <div dojoType="dijit.layout.ContentPane" region="top" >
    </div>
  
    <div dojoType="dijit.layout.ContentPane" style="width:30em"  region="leading" splitter="true">

          <div id="_tree_container" >  
          </div>

    </div>

    <div dojoType="dijit.layout.ContentPane" id="tbl_layout" region="center" splitter="true" >
          <div id="grid_container" >  
          </div>

    </div>

    <div dojoType="dijit.layout.ContentPane"  id="gfx_layout" style="width:50em;overflow:hidden" region="trailing" splitter="true" >
          <div id="gfx_dz">  

          </div>
          <div id="gfx_cht">  

          </div>
    </div>

    <div dojoType="dijit.layout.ContentPane"  id="status_area"  region="bottom">
    </div>

</div> 
</body>
</html>

Change History (5)

comment:1 Changed 10 years ago by Adam Peller

Component: General → Dijit
Owner: anonymous deleted

comment:2 Changed 10 years ago by bill

There are two issues with your test case:

  • claro.css and dojo.css should be included first, before including dojo.js, to make sure that the CSS is loaded before the widgets start rendering
  • the height: 90% setting on your BorderContainer means that it should be 90% of the height of the parent element, but your parent element has no height specified. Should add html, body { height: 100%; width: 100%; padding: 0 } to your page.

Try fixing those and add a comment about your results. And if you are still seeing a problem then attach the new test case using the "Attach file" button, thanks.

comment:3 Changed 10 years ago by bill

(In [23900]) Don't create gutter for center pane. It was being created accidentally. It's an old bug, but causes problems in 1.6 where the gutter overlaps the real BorderContainer panes, if app has changed z-index of gutters.

Refs #11030, #12351 !strict.

comment:4 Changed 10 years ago by dickb

Thanks for tip about order of css vs dojo.js, which fixes the problem I was seeing.

The patch at 23900 addresses the wierd blue rectangle; thanks for that too!

comment:5 Changed 10 years ago by bill

Resolution: → duplicate
Status: new → closed

OK great, I'll close this ticket as a dup then.

Note: See TracTickets for help on using tickets.