Latest posts of: unable to start

EasyUI Forum

December 18, 2025, 03:40:33 PM

Welcome, Guest. Please login or register.

News:

Home

Help

Show Posts
Pages: [1]

General Category / EasyUI for jQuery / Layout: I want those regions' dimensions to be set in % of a window or in "em"s

on: November 18, 2012, 08:30:10 PM

I don't understand why don't those regions accept anything but pixels. For example, I take "layout.html" file and want North to be always (even when the browser window is resized) 20% of the browser window height, South – 10%, West – 30% width & 70% height, East (initially collapsed) – also 30% width & 70% height, and Center must fill the rest space, of course. I tried this:

Code:

<body class="easyui-layout">
	<div id="north" data-options="region:'north',border:false" style="background:#B3DFDA;">north region</div>
	<div id="west" data-options="region:'west',split:true,title:'West'" style="">west content</div>
	<div id="east" data-options="region:'east',split:true,collapsed:true,title:'East'">east region</div>
	<div  id="south" data-options="region:'south',border:false" style="background:#A9FACD;">south region</div>
	<div data-options="region:'center',title:'Center'"></div>
	
<script>

  $('#west, #east').css('width',$(window).width()*0.3+'px');
  $('#west, #east').css('height',$(window).height()*0.7+'px');
  $('#north').css('height',$(window).height()*0.2+'px');
  $('#south').css('height',$(window).height()*0.1+'px');
 
 
 
 $(window).resize(function() {
  $('#west, #east').css('width',$(window).width()*0.3+'px');
  $('#west, #east').css('height',$(window).height()*0.7+'px');
  $('#north').css('height',$(window).height()*0.2+'px');
  $('#south').css('height',$(window).height()*0.1+'px');
});

</script>
</body>

But after I zoom, something goes wrong. Dimensions don't keep their proportions.
Also, I might want to set widths/heights in "em" units, or even "vw"/"vh" units (if the browser supports it).

Pages: [1]