resizing the ContentPane

Question

I have a sidepanel (query form), a center panel (a map), and a bottom panel that has a height of 2%. When a query is done on the side panel, I'd like the bottom panel to show up (height = 30%) with the results.

I am using the BorderContainers.

I can get the bottom panel to change size, but you have to touch the bottom panel and resize in order for the tabcontainer (holding the results) to expand. Otherwise, its an empty panel with just the tippy top of the tabs showing (from the height = 2%).

<div id="bottompanel"  data-dojo-type="dijit/layout/TabContainer" 
data-dojo-props="splitter: true, region:'bottom'"  style=" height: 2%; ">
    <div data-dojo-type="dijit/layout/ContentPane" title="tab #1">tab pane #1</div>
    <div data-dojo-type="dijit/layout/ContentPane" title="tab #2">tab pane #2</div>
    <div data-dojo-type="dijit/layout/ContentPane" title="tab #3">tab pane #3</div>
</div>


function openResults() {   
toggleResults(bottompanel);
}

function toggleResults(contentElement) {
   require(["dojo/dom-geometry", "dojo/dom", "dojo/dom-style"],
   function (domGeom, dom, domStyle) {

      var node = dom.byId(contentElement);
      var computedStyle = domStyle.getComputedStyle(node);
      var size = domGeom.getMarginBox(node);

      if (size.h > 20) {
        domStyle.set(dom.byId("bottompanel"), "display", "none");
        domStyle.set(dom.byId("centerpanel"), "height", "100%");

    } else {
          domStyle.set(dom.byId("bottompanel"), "display", "block");
          domStyle.set(dom.byId("bottompanel"), "height", "30%");
          domStyle.set(dom.byId("centerpanel"), "height", "70%");
      }
  }); 
}

I don't know how to make it refresh or resize.

Richard · Answer 1 · 2014-03-27T23:49:45.763

0

If everything is wrapped in a BorderContainer, you can just call .layout() on the BorderContainer to resize everything.

Here is an example of what I do in my own code (Dojo 1.9):

var leftPane = dom.byId("leftPane");
var rightPane = dom.byId("rightPane");
var bc = registry.byId("console");

domGeometry.setContentSize(leftPane, {
    w: 140
});
domGeometry.setContentSize(rightPane, {
    w: 415
});
bc.layout();

edited Mar 27 '14 at 23:49

answered Mar 27 '14 at 05:37

Richard

1,138
1
6
11

I have added bc.resize(); and I have also tried bc.layout(); I getn an error: TypeError:bc.resize is not a function. – user1327390 Mar 27 '14 at 20:08
Hm, you might be right and I may have mixed up resize and layout. Does layout work? Modified my answer also as I do use layout in my own code to resize ContentPane within my BorderContainers. – Richard Mar 27 '14 at 23:45

resizing the ContentPane

1 Answers1