Layout with Bootstrap - How to resizing Layout

Suite and Optimus Suite 5
#1

Hello,
I want to asking how to make Layout autosize to its container when resizing browser window

My code:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

    </div>
    
      <div class="col-sm-6 col-md-4 col-lg-6">
         <div id='mylayoutDIV' style="width:100%;height:400px; "></div>
      </div>        
  
  </div>  
</div>

<script src="js/jquery-1.10.2.min.js"></script>    
<script src="js/bootstrap.min.js"></script>
<script src="../codebase/dhtmlx.js"></script>

<script>    

  var myLayout = new dhtmlXLayoutObject({
    parent: 'mylayoutDIV',
    pattern: '1C'
   });
  
  myLayout.setSizes();

</script>

Thanks

before.jpg827×447 36.9 KB


after.jpg743×528 41.9 KB

#2

Hi

layout check window size only when inited in a full-screen mode. in all other cases you have to call layout.setSizes() manually, this will fit layout to parent container.

#3

Hai Andrei

I 'm not using window but div as parent container. You said other than “window” case must call layout.setSizes() manually. In the bottom part of my code already call layout.setSizes() manually, but Layout not auto resize to it’s parent container div. Is it my code is wrong? Could you give me the right code please.

Thanks

#4

Hi

layout check browser’s window size only when inited in a full-screen mode. in all other cases you have to call layout.setSizes() manually, this will fit layout to parent container each time you container domension has changed.

#5

Owh sorry…full screen at browser’s window not dhtmlx window.

But in my case Layout not initiated in full screen mode. As you said " in all other cases you have to call layout.setSizes() manually. this will fit layout to parent container each time you container domension has changed"

So in my mind “in all other cases than full screen mode I must call layout.setSizes() manualy if I want layout fit to parent container”

In my case
Layout parent container is div (not full screen), after that in my code call layout setSizes(). But when resizing browser’s window parent container div resizing properly but why Layout not fit properly to it’s parent container div (see pic no 2)

Thanks

#6

Three witches watch three Swatch watches. Which witch watches which Swatch watch? :slight_smile:

Well…

  1. layout inited on document.body called fullscreen layout (or fullscreen init). in this case layout attached some callbacks to browser resize events to track window size change and adjust itself.

  2. layout inited on a simple div (your case) does not have this functionality (i.e. this functionality not activated). so to adjust layout when div’s dimension changed you have to call layout.setSizes(), after this layout will take new div’s width and height and redraw itself.

  3. having the following condition But when resizing browser’s window parent container div resizing properly I can suggest you to add window’s resize callbacks manually.

example:

var tm; function doOnResizeStart() { window.clearTimeout(tm); tm = window.setTimeout(doOnResizeEnd, 200); } function doOnResizeEnd() { layout.setSizes(); } if (typeof(window.addEventListener) == "function") { window.addEventListener("resize", doOnResizeStart, false); } else { window.attachEvent("onresize", doOnResizeStart); }

#7

Ha ha ha… Finally the code from Javascript Guru is launching :smiley:

Thank you very much Andrei