GibboK GibboK - 7 months ago 26
Javascript Question

Possible bug - dijit/layout/ContentPane does not resize when adding widgets as children

Widget

dijit/layout/ContentPane
does not resize properly when adding widgets as children.

Steps to reproduce issue:


  1. Open test case at ‚Äčhttps://jsfiddle.net/gibbok/wy5df86v/

  2. Click 10 times button "Click me many times!".



Issue:


  • dijit/layout/ContentPane
    does not resize when adding widgets as children.
    Content inserted is not fully visible.



I would need the dimensions for
dijit/layout/ContentPane
to be increased in order to accommodate new added widgets so that all inner widgets should be visible.

I think this is a bug within the dijit widget.I would like to know a workaround if any.

Notes:
I have reported bug to dojo https://bugs.dojotoolkit.org/ticket/19021

require(["dijit/layout/ContentPane", "dijit/TitlePane", "dijit/form/Button", "dojo/domReady!"], function(ContentPane, TitlePane, Button) {
this._contentPanel = new ContentPane({
style: "height:125px; background-color:red;"
}, "contentPanel");

this._titlePanel = new TitlePane({
title: "I'm a TitlePane",
content: "Collapse me!"
}, "titlePanel");

this._button = new Button({
label: "Click me many times!",
onClick: function() {
this._titlePanel.addChild(new Button({
label: "Test",
style: "width: 250px"
}));
}.bind(this)
}, "button");

this._contentPanel.addChild(this._titlePanel);
this._titlePanel.addChild(this._button);
this._contentPanel.startup();
});

Answer Source

I think the clean way to workaround this is just surround your contentpane by a BorderContainer , the resize() will be triggered automatically , otherwise I'think you should recalculate all the stuff and resize all enclosing widget (without using BorderContainer)

bellow a working snippet : (I hade specified the region center for content pane to prevent errors )

require(["dijit/layout/BorderContainer","dijit/layout/ContentPane", "dijit/TitlePane", "dijit/form/Button", "dojo/domReady!"], function(BorderContainer,ContentPane, TitlePane, Button) {
  this._borderContainer = new BorderContainer({},"borderContainer");
  this._contentPanel = new ContentPane({
  	region: "center",
    style: "min-height:125px; background-color:red;"
  }, "contentPanel");

  this._titlePanel = new TitlePane({
    title: "I'm a TitlePane",
    content: "Collapse me!"
  }, "titlePanel");

  this._button = new Button({
    label: "Click me many times!",
    onClick: function() {
      this._titlePanel.addChild(new Button({
        label: "Test",
        style: "width: 200px"
      }));
      
    }.bind(this)
  }, "button");
	this._borderContainer.addChild(this._titlePanel);
  this._contentPanel.addChild(this._titlePanel);
  this._titlePanel.addChild(this._button);
  this._contentPanel.startup();
});
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/>
<div class="claro">
  <div id="borderContainer">
    <div id="contentPanel">
      <div id="titlePanel">
        <div id="button">
        </div>
        <div id="content">
        </div>
      </div>
    </div>
  </div>
</div>