Print Page - Layout: I want those regions' dimensions to be set in % of a window or in "em"s

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).

Don't use the jQuery core method 'css' to resize the region panel. Please use the 'resize' method of panel instead. The following code can do what you want.

Code:

$(function(){
	setSize();
	$(window).resize(function() {
		setSize();
	});
	function setSize(){
		$('#west,#east').panel('resize',{
			width:$(window).width()*0.3,
			height:$(window).height()*0.7
		});
		$('#north').panel('resize',{height:$(window).height()*0.2});
		$('#south').panel('resize',{height:$(window).height()*0.1});
		$('body').layout('resize');
	}
});

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: unable to start on November 18, 2012, 08:30:10 PM