Print Page - Tab height

Hi all,

i am trying to display two tabs that occupy the whole height.
The height of the first tab is 100px and the height of the second tab is (100% - 100px).
It doesn't works.
http://195.144.40.170/jeasyui/PPP.6/index.html

Thanks for any help.
Miche

In your above example page please wrap the 'tt2' in separate div and apply your css class 'tt2_class' to that div and in 'tt2' data-options set fit property to true.

Code:


<style>
   html,body,form {
      height: 95%;
   }

   .tt2_class {
      height: calc(100% - 100px);
   }
</style>

<body>
   
   
   <div id="tt1" class="easyui-tabs" border="true" style="height:100px;">
	  <div title="Tab1">
		 Hello 1
	  </div>
   </div>
   

   <div class="tt2_class">   
	   <div id="tt2" class="easyui-tabs" border="true" data-options="fit:'true'"/>
		  <div title="Tab2">
			 Hello 2
		  </div>
	   </div>
   </div>   
   
</body>

Or if you want to do it with javascript try this.

Code:


var tt1_height = $('#tt1').tabs('options').height;
$('#tt2').tabs({height:$(window).height()-tt1_height});

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: rezzonico on March 15, 2019, 08:42:40 AM