Clever Geek Handbook

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

The widget dijit/layout/ContentPane

does not resize when adding widgets as children.

Steps to reproduce the problem:

Question:

  • dijit/layout/ContentPane

    does not resize when widgets are added as children. The embedded content is not fully displayed.

I need the dimensions to dijit/layout/ContentPane

enlarge to accommodate the newly added widgets so that all internal widgets are visible.

I think this is a bug inside the dijit widget. I would like to find a workaround if there is one.

Notes: I reported a 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: "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();
});
+3


source to share


3 answers


I think you want to set the ContentPane flag doLayout

to false. Then it won't size the nested ContentPane. Also remove the hardcoded height 125px.



+2


source


I think the clean way to get around this is just surround yours contentpane

with BorderContainer

, resize () will be triggered automatically, otherwise I should think that you should recalculate all data and resize the entire enclosing widget (without using BorderContainer)

do the working snippet: (I pointed out that the content area is 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>
Run codeHide result


+4


source


You can do a simple CSS traversal:

#titlePanel {
  height: auto !important;
}

See https://jsfiddle.net/9eja3jtr/3/

0


source






More articles:


All Articles