EasyUI Forum
May 09, 2024, 07:57:30 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Poll
Question: datagrid在tabs中,当datagrid的高度大于tabs的高度时会溢出
datagrid - 0 (0%)
tabs - 0 (0%)
溢出 - 0 (0%)
高度 - 0 (0%)
Total Voters: 0

Pages: [1]
  Print  
Author Topic: datagrid在tabs中会溢出  (Read 18636 times)
zero
Newbie
*
Posts: 1


View Profile Email
« on: August 25, 2013, 07:27:31 PM »

在IE6~8浏览器,datagrid放在tabs中,当datagrid的高度大于tabs的高度时会溢出,tabs会出现滚动条,但是datagrid不随滚动条上下移动,超出高度的部分显示在tabs的外面。

代码:
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Nested Tabs - jQuery EasyUI Demo</title>
   <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
   <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
   <link rel="stylesheet" type="text/css" href="../demo.css">
   <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
   <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
   <h2>Nested Tabs</h2>
   <div class="demo-info">
      <div class="demo-tip icon-tip"></div>
      <div>The tab panel can contain sub tabs or other components.</div>
   </div>
   <div style="margin:10px 0;"></div>
   <div class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px">
      <div title="Sub Tabs" style="padding:10px;">
         <div class="easyui-tabs" data-options="fit:true,plain:true">
            <div title="Title1" style="padding:10px;">Content 1</div>
            <div title="Title2" style="padding:10px;">Content 2</div>
            <div title="Title3" style="padding:10px;">Content 3</div>
         </div>
      </div>
      <div title="Ajax" data-options="href:'../tabs/_content.html',closable:true" style="padding:10px"></div>
      <div title="Iframe" data-options="closable:true" style="overflow:hidden">
         <iframe scrolling="yes" frameborder="0"  src="http://www.jeasyui.com/forum/index.php" style="width:100%;height:100%;"></iframe>
      </div>
      <div title="DataGrid" data-options="closable:true" style="padding:10px">
         <table class="easyui-datagrid" data-options="width:500,height:300,singleSelect:true,rownumbers:true">
            <thead>
               <tr>
                  <th data-options="field:'f1',width:100">Title1</th>
                  <th data-options="field:'f2',width:100">Title2</th>
                  <th data-options="field:'f3',width:100">Title3</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>d11</td>
                  <td>d12</td>
                  <td>d13</td>
               </tr>
               <tr>
                  <td>d21</td>
                  <td>d22</td>
                  <td>d23</td>
               </tr>
            </tbody>
         </table>
      </div>
   </div>

</body>
</html>
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: August 25, 2013, 10:00:45 PM »

To solve this issue, please add 'position:relative' style to the tab panel.
Code:
<div class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px">
  <div title="Sub Tabs" style="padding:10px;">
  </div>
  <div title="Ajax" data-options="href:'../tabs/_content.html',closable:true" style="padding:10px"></div>
  <div title="Iframe" data-options="closable:true" style="overflow:hidden">
  </div>
  <div title="DataGrid" data-options="closable:true" style="position:relative;padding:10px">
<table class="easyui-datagrid" data-options="width:500,height:300,singleSelect:true,rownumbers:true">
</table>
  </div>
</div>
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!