jQuery MiniUI

 找回密码
 立即注册
查看: 2805|回复: 18
打印 上一主题 下一主题

splitter垂直,在tabs中套了一个tabs,内层的tabs无法自适应 [复制链接]

Rank: 2

跳转到指定楼层
楼主
发表于 2015-7-15 13:19:50 |只看该作者 |倒序浏览
splitter垂直,在tabs中套了一个tabs,内层的tabs无法自适应

Rank: 8Rank: 8

沙发
发表于 2015-7-15 13:39:39 |只看该作者
请提供相关代码

Rank: 2

板凳
发表于 2015-7-15 14:07:05 |只看该作者
dforce 发表于 2015-7-15 13:39
请提供相关代码

<!DOCTYPE html >

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Splitter</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

   
    <script src="../../scripts/boot.js" type="text/javascript"></script>
   
      

</head>
<body>
    <div class="mini-splitter" style="width: 1200px; height: 700px;" borderstyle="border:0">
                <div size="40%" showcollapsebutton="true">
                    <div class="mini-splitter" style="width: 100%; height: 100%;" vertical="true" borderstyle="border:0">
                        <div size="60%" showcollapsebutton="true">
                            <div class="mini-fit">
        <div class="mini-tabs" activeindex="0" id="str_STsystemNoticeMNDGTab" style="width: 100%; height: 100%;" borderstyle="border:0" showheader="false">
            <div name="str_STsystemNoticeMNDGView" style="width: 100%; height: 100%">
                <div class="mini-panel" title="公告列表" style="width: 100%; height: 92%">
                    <div class="mini-datagrid" showheader="false" showpager="false" style="width: 100%; height: 100%" >
                        <div property="columns">
                            <div field="NoticeTheme" width="286" headeralign="center" >标题</div>
                            <div field="NoticePublishDate" width="117" headeralign="center" align="center" >发布日期</div>
                            <div field="NoticeState" width="60" headeralign="center" align="center">是否发布</div>
                        </div>
                    </div>
                </div>
                <div style="width: 65%; text-align: right; float: left;">
                    <div class="mini-pager" style="width: 100%; background: #EFF2F4; border: 1px solid gray; margin-right: 5px; margin-top: 5px; margin-bottom: 5px;"
                        totalcount="123" pagesize="30" onpagechanged="sn_SNOnPageChanged" sizelist="[5,10,20,30,50,100]">
                    </div>
                </div>
                <div style="width: 30%; text-align: right; float: right">
                    <a class="mini-button"  title="新增" data-placement="bottomright" onclick="var tabs = mini.get('str_STsystemNoticeMNDGTab'); var tab = tabs.getTab('str_STsystemNoticeMNDGNew');tabs.activeTab(tab);" style="width: 60px; height: 23px; padding-top: 3px; margin-right: 5px; margin-top: 5px; margin-bottom: 5px;">新公告</a>
                </div>
            </div>
            <div name="str_STsystemNoticeMNDGNew" style="width: 100%; height: 100%">
                <div class="mini-fit">
                    <table style="width: 100%; height: 100%">
                        <tr>
                            <td style="font-weight: bold; text-align: left; height: 5%">
                                标题不超过100个字)
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 100%; height: 5%">
                                <input class="mini-textbox" vtype="maxLength:100" required="true"  style="width: 100%" />
                            </td>
                        </tr>
                        <tr>
                            <td style="font-weight: bold; text-align: left">
                                正文
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 100%; height: 80%">
                                <textarea class="mini-textarea"  style="width: 100%; height: 100%"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 100%; vertical-align: middle; height: 5%">
                                <div style="width: 60%; float: left; text-align: left; vertical-align: middle; padding-top: 5px">
                                    状态:
                                <input checked name="sn_SNState" style="vertical-align: middle" type="radio" />
                                    立即发布
                                <input style="vertical-align: middle" name="sn_SNState" type="radio" />
                                    暂不发布
                            级别:
                                <input checked name="sn_SNLevel" style="vertical-align: middle" type="radio" />
                                    一般
                                <input style="vertical-align: middle" name="sn_SNLevel" type="radio" />
                                    紧急
                                </div>
                                <div style="width: 40%; float: right; text-align: right">
                                    <a class="mini-button"  title="保存" data-placement="bottomright" style="width: 60px; height: 20px;">保存</a>
                                    <a class="mini-button"  title="返回" data-placement="bottomright" style="width: 60px; height: 20px;">返回</a>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
                        </div>
                        <div showcollapsebutton="true">
                            <div ></div>
                        </div>
                    </div>
                </div>
                <div showcollapsebutton="true">
                    <div class="mini-splitter" style="width: 100%; height: 100%;" vertical="true" borderstyle="border:0">
                        <div size="60%" showcollapsebutton="true">
                            <div ></div>
                        </div>
                        <div showcollapsebutton="true">
                            <div ></div>
                        </div>
                    </div>
                </div>
            </div>

</body>
</html>

Rank: 2

地板
发表于 2015-7-15 14:15:22 |只看该作者

操作步骤如下

cuiyuanyuan 发表于 2015-7-15 14:07
Splitter
   


附件: 你需要登录才可以下载或查看附件。没有帐号?立即注册

Rank: 8Rank: 8

5#
发表于 2015-7-15 14:25:26 |只看该作者
cuiyuanyuan 发表于 2015-7-15 14:07
Splitter
   

你这页面结构真复杂
tabs内部页面默认有padding和margin,撑开了
<div class="mini-tabs" activeindex="0" id="str_STsystemNoticeMNDGTab" style="width: 100%;
                            height: 100%;" borderstyle="border:0" showheader="false" bodyStyle="padding:0;margin:0">

Rank: 2

6#
发表于 2015-7-15 15:39:19 |只看该作者
dforce 发表于 2015-7-15 14:25
你这页面结构真复杂
tabs内部页面默认有padding和margin,撑开了

还是不行呀,你那边可以了吗?!

Rank: 2

7#
发表于 2015-7-15 15:43:44 |只看该作者
dforce 发表于 2015-7-15 14:25
你这页面结构真复杂
tabs内部页面默认有padding和margin,撑开了


附件: 你需要登录才可以下载或查看附件。没有帐号?立即注册

Rank: 2

8#
发表于 2015-7-15 16:37:44 |只看该作者
dforce 发表于 2015-7-15 13:39
请提供相关代码

where are you ? 问题没解决呀

Rank: 8Rank: 8

9#
发表于 2015-7-15 16:50:36 |只看该作者
cuiyuanyuan 发表于 2015-7-15 16:37
where are you ? 问题没解决呀

在处理

Rank: 8Rank: 8

10#
发表于 2015-7-16 10:03:13 |只看该作者
cuiyuanyuan 发表于 2015-7-15 16:37
where are you ? 问题没解决呀

检查发现是由于你内部用于布局的table引起的
我们控件内部的高度都由js计算,table布局会有很大的不稳定性,请用div布局

Archiver|普加软件

GMT+8, 2024-5-6 17:18 , Processed in 1.053668 second(s), 10 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部