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

EasyUI Forum

December 18, 2025, 03:51:43 PM

Welcome, Guest. Please login or register.

News:

Home

Help

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

Pages: [1]

« previous next »

Author

Topic: Layout: I want those regions' dimensions to be set in % of a window or in "em"s (Read 11171 times)

unable to start

Newbie

Posts: 1

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


	Logged

stworthy

Administrator
Hero Member

Posts: 3581

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

« Reply #1 on: November 20, 2012, 01:31:51 AM »

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');
	}
});


	Logged

Pages: [1]

« previous next »