[Dojo-interest] ContentPanes inside a custom widget won't render properly

Pankaj Vishwani pankajvishwani at gmail.com
Mon Apr 27 19:01:42 EDT 2009


By the way, dojo-1.2.3 does not have this problem (I guess you are using an
older version). Also, I have not used customWidgets but have faced similar
problem while using contentpane/grid. The way I fixed this problem in my
case is by calling resize() of the parent container on load of the child
container. Here's the code to do this (I am using dojo-1.2.3 tough):


<html>
<body>
	<style>
	  @import
"http://ajax.googleapis.com/ajax/libs/dojo/1.2.3/dojo/resources/dojo.css";
	  @import
"http://ajax.googleapis.com/ajax/libs/dojo/1.2.3/dijit/themes/tundra/tundra.css";
    .hello_class{ 
      width: 100%; 
      height: 100%; 
    } 
	</style>
	<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/dojo/1.2.3/dojo/dojo.xd.js"
djConfig="isDebug:false, parseOnLoad:true"></script>
	<script>
		dojo.require('dijit.layout.BorderContainer');
		dojo.require('dijit.layout.ContentPane');
	</script>
	<script>
  function testLoad()
  {
    this.postCreate = function(){ 
      this.bc = new dijit.layout.BorderContainer({design: 'headline',
persist: true, style: 'width: 100%; height:
100%;'}).placeAt(dojo.byId('testDiv')); 
      var thisObj = this;
      this.clientPane = new dijit.layout.ContentPane({region: 'top', style:
'height: 100px;background-color:blue;', content:'top', onLoad: function
(){dojo.hitch(thisObj, 'resizeContainer')();}},
document.createElement('div'));
      this.centerPane = new dijit.layout.ContentPane({region: 'center',
content: 'center', style:'background-color:#DCDCDC'},
document.createElement('div')); 
      this.bottomPane = new dijit.layout.ContentPane({region: 'bottom',
style: 'height: 100px;background-color:red;', content: 'bottom'},
document.createElement('div')); 
      this.bc.startup(); 
      this.bc.addChild(this.clientPane); 
      this.bc.addChild(this.centerPane); 
      this.bc.addChild(this.bottomPane); 
    }

    this.resizeContainer = function (){
      console.info('resizing container');
      this.bc.resize();
    }
  }

  dojo.addOnLoad(function (){
    var obj = new testLoad();
    obj.postCreate();
  });
</script>
<div class="hello_class" id='testDiv'></div> 

</body>
</html>



Regards,
Pankaj Vishwani



jmansej wrote:
> 
> Afternoon,
> 
> I am struggling a little bit with incorrect rendering of ContenPanes 
> inside a bordercontainer. The bordercontainer is ok, it spans across the 
> whole window, however 3 contenpanes inside a bordercontainer don't, 
> rendering them only as wide as their content is. I would like them to 
> span the whole window as well.
> 
> The sample code form customWidget.js:
> 
> dojo.declare(
>         "customWidget",
>         [dijit._Widget, dijit._Templated],
>         {
>             templatePath: dojo.moduleUrl("customWidget", 
> "templates/template.html"),
>            
>             constructor: function() {},
>            
>             postMixInProperties: function() {},
>            
>             postCreate: function() {
>                 // create layout structure
>                 this.bc = new dijit.layout.BorderContainer({design: 
> 'headline', persist: true, style: 'width: 100%; height: 
> 100%;'}).placeAt(this.test);
>                
>                 this.clientPane = new dijit.layout.ContentPane({region: 
> 'top', style: 'height: 100px'}, document.createElement('div'));
>                
>                 this.centerPane = new dijit.layout.ContentPane({region: 
> 'center', content: 'center'}, document.createElement('div'));
>                
>                 this.bottomPane = new dijit.layout.ContentPane({region: 
> 'bottom', style: 'height: 100px', content: 'bottom'}, 
> document.createElement('div'));
>                
>                 this.bc.startup();
>                
>                 this.bc.addChild(this.clientPane);
>                 this.bc.addChild(this.centerPane);
>                 this.bc.addChild(this.bottomPane);
>             }
>         }
> );
> 
> Code from templates/template.html:
> 
> <div class="hello_class" dojoAttachPoint="test"></div>
> 
> Code from themes/template.css:
> 
> div.hello_class {
>     width: 100%;
>     height: 100%;
> }
> 
> I guess it would be a CSS issue or something to do with the DOM loading 
> consequence. Any help would be appreciated.
> 
> Thanks,
> Pavol
> _______________________________________________
> FAQ: http://dojotoolkit.org/support/faq
> Book: http://dojotoolkit.org/docs/book
> Forums: http://dojotoolkit.org/forum
> Dojo-interest at mail.dojotoolkit.org
> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
> 
> 

-- 
View this message in context: http://www.nabble.com/ContentPanes-inside-a-custom-widget-won%27t-render-properly-tp23231737p23267042.html
Sent from the Dojo mailing list archive at Nabble.com.



More information about the Dojo-interest mailing list