Dynamically change borderContainer size in dojo

Question

Dynamically change borderContainer size in dojo

600 views Asked by Vas Sen At 20 November 2017 at 22:32

I have the following borderContainer whose size is hardcoded. I'm trying to change it dynamically based on the screen resolution :

<div id="border1" dojoType="dijit.layout.BorderContainer" 
     style="width: 1010px; height: 500px">
    ...
</div>

I tried to do the following to change it dynamically and it does not seem to work

dojo.require("dojo/window");
var bc = dijit.byId("borderContainer");   
dojo.setStyle(bc.domNode, "height", screen.height+"px");
dojo.setStyle(bc.domNode, "width", screen.width+"px");

Original Q&A

There are 2 answers

**bajji** · Answer 1 · 2017-11-21T16:04:09+00:00

bajji On 21 November 2017 at 16:04

Try the following.

Get the BorderContainer:

    var bc = dijit.byId("borderContainer");

and then set the style set for its style property:

    bc.set('style',"height: 300px; width: 500px;");

**Bourbia Brahim** · Answer 2 · 2017-11-22T09:39:16+00:00

First thing is I suggest to you to switch to modern dojo architecture
AMD DOJO wich load asynchronously you modules :

Now , you can set only css style at first by setting width and height to 100% , and Important thing here is to set it's parent to 100% hieght and width ( also for body )

Otherwise you can use programmatic approach : first set body height and width to 100% when window resized set border container node to 100%.

require([ "dojo/on","dojo/dom-style", "dojo/ready", "dijit/registry", "dijit/layout/BorderContainer", "dijit/layout/ContentPane"],function(On, domStyle,ready,registry,BorderContainer,ContentPane){
 ready(function(){
    var borderContainer = registry.byId("bc");
    bcDomNode = borderContainer.domNode;
    
    On(window,"resize",function(e){
      domStyle.set(bcDomNode,'width','100%');
      domStyle.set(bcDomNode,'height','100%');
     
    })
    
    setTimeout(function(){
      domStyle.set(bcDomNode,'width','100%');
      domStyle.set(bcDomNode,'height','100%');
    },3000)
    
  })
  
});

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}

<link href="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/>
<script>
    dojoConfig= {
        parseOnLoad: true,
        async: true
    };
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.0/dojo/dojo.js"></script>

<body class="claro">
  <div id="bc" data-dojo-type="dijit/layout/BorderContainer" style="width: 1010px; height: 500px">
      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" id="center">center</div>
  </div>
</body>

TechQA.

Dynamically change borderContainer size in dojo

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in DOJO

Related Questions in RESIZE

Related Questions in DIJIT.LAYOUT

Popular Questions

Popular Tags

Trending Questions