Quantcast

BorderContainer resizing problem

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

BorderContainer resizing problem

Earl Hood

I am trying to determine if the following behavior is a valid bug or a
limitation that needs to be documented:

Problem in a nutshell:

- Take a bordercontainer with a left, center, and right region.
- Load page into browser, and resize browser window to maximum (this can
   be done by selecting the window maximize button in the window title
   bar).
- Resize right region to maximimum size, causing left and center regions
   to be reduced to far left of window.
- Reduce size of browser window (e.g. select reduce window button in
   window title bar).

Result:

- The left and center regions are not visible, and the right splitter is
   off the screen (to the left).  I.e. The right region has a negative
   left offset.

Below is a sample page, adapted from demo provided from Dojo web site,
that can be used to illustrate the problem.

If this is considered a limitation and not a bug, is their advise on how
best to get bordercontainer to readjust itself to avoid the problem?

Thanks.

--- HTML PAGE EXAMPLE ---

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dijit/themes/claro/claro.css">
<style type="text/css">
html, body { width: 100%; height: 100%; margin: 0; overflow:hidden; }
#borderContainer { width: 100%; height: 100%; }
</style>
<script>dojoConfig = {parseOnLoad: true}</script>
<script
src='//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js'></script>
<script>
require(["dojo/parser", "dijit/layout/ContentPane",
"dijit/layout/BorderContainer"]);
</script>
</head>
<body class="claro">
     <div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true"
id="borderContainer">
     <div data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="splitter:true, region:'left', minSize:50" style="width:
100px;">Hi, I'm left pane</div>
     <div data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="splitter:true, region:'center', minSize:50">Hi, I'm
center pane</div>
     <div data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="splitter:true, region:'right', minSize:50">Hi, I'm
right pane</div>
</div>
</body>
</html>
--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
Loading...