EasyUI Forum
May 11, 2024, 01:07:35 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Tab height  (Read 3779 times)
rezzonico
Full Member
***
Posts: 183


View Profile
« on: March 15, 2019, 08:42:40 AM »

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
« Last Edit: March 15, 2019, 08:51:41 AM by rezzonico » Logged
jahangir
Jr. Member
**
Posts: 51



View Profile Email
« Reply #1 on: March 15, 2019, 09:55:27 PM »

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

« Last Edit: March 15, 2019, 10:25:07 PM by jahangir » Logged
rezzonico
Full Member
***
Posts: 183


View Profile
« Reply #2 on: March 18, 2019, 04:42:37 AM »

Thanks !

Miche
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!