jQuery MiniUI

标题: 关于mini-splitter高度100%的问题 [打印本页]
作者: bl00071    时间: 2014-9-23 09:43:30     标题: 关于mini-splitter高度100%的问题

当mini-splitter高度设为100%是，下发的splitter区域的grid高度会超出浏览器，显示不全。固定高度则没有此问题[attach]5205[/attach]

代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>代码定义</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="scripts/boot.js" type="text/javascript"></script>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            border: 0;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
   <div class="mini-toolbar" id="WsdMainToolBar">
    <table style="width:100%">
        <tr>
            <td style="width:100%;">
                <a class="mini-button" iconcls="icon-find" id="_BasicSearch">查询</a>
                <a class="mini-button" iconcls="icon-add" id="_BasicAdd">新增</a>
                <a class="mini-button" iconcls="icon-edit" id="_BasicEdit">编辑</a>
                <a class="mini-button" iconcls="icon-remove" id="_BasicDelete">删除</a>
                <span class="separator"></span>
                <a class="mini-button" iconcls="icon-save" id="_BasicSave">保存</a>
                <a class="mini-button" iconcls="icon-cancel" id="_BasicCancel">取消</a>
                <a class="mini-button" iconcls="icon-cut" id="_BasicUsedButton">启用</a>
                <a class="mini-button" iconcls="icon-lock" id="_BasicUnUsedButton">停用</a>
            </td>
        </tr>
    </table>
</div>
    <div id="WsdMainTabs" class="mini-tabs" activeIndex="0" style="width:100%;height:100%;" bodyStyle="padding:0;border:0;">
        <div title="浏览" name="WsdViewTab">
            <div class="mini-splitter" vertical="true" style="width:100%;height:100%;">
                <div size="50%" showCollapseButton="true">
                    <div id="gCodeClass" class="mini-datagrid" style="width:100%;height:100%;"
                         url="WsdAjaxRequestPage.aspx?method=loadCodeClass"  idField="id" selectOnLoad="true"
                         multiSelect="true" allowResize="true">
                        <div property="columns">            
                            <div type="checkcolumn"></div>            
                            <div field="classCode" width="120" headerAlign="center" align="center" allowSort="true">代码</div>
                            <div field="cnName" width="100" allowSort="true" align="center"  renderer="onGenderRenderer" align="center" headerAlign="center">中文名称</div>
                            <div field="enName" width="100" allowSort="true" align="center" >英文名称</div>
                            <div field="createdDate" width="100" allowSort="true" align="center"  dateFormat="yyyy-MM-dd">创建时间</div>
                            <div field="status_cnName" width="100" align="center"  headerAlign="center" allowSort="true">数据状态</div>
                        </div>
                    </div>
                </div>
                <div showCollapseButton="true" size="50%">
                    <div id="gCodeInfo" url="WsdAjaxRequestPage.aspx?method=loadCodeInfo"  class="mini-datagrid"  style="width:100%;height:100%;" idField="id" showPageIndex="false" selectOnLoad="true" virtualScroll="true"
                         multiSelect="true" allowResize="true" showPager="false">
                        <div property="columns">
                            <div type="checkcolumn"></div>
                            <div field="code" width="120" headerAlign="center" allowSort="true">代码</div>
                            <div field="cnName" width="100" allowSort="true" renderer="onGenderRenderer" align="center" headerAlign="center">中文名称</div>
                            <div field="enName" width="100" allowSort="true">英文名称</div>
                            <div field="StrSelect" width="100" allowSort="true" >是否默认</div>
                            <div field="parentCode_cnName" width="100" headerAlign="center" allowSort="true">父代码</div>
                            <div field="status_cnName" width="100" allowSort="true" >数据状态</div>
                            <div field="srl" width="100" headerAlign="center" allowSort="true">顺序</div>
                        </div>
                    </div>
                </div>        
            </div>
        </div>
        <div title="编辑" iconCls="icon-cut" name="WsdEditTab">
            <fieldset style="width:700px;border:solid 1px #aaa;margin-top:8px;position:relative;">
                <legend>详细信息</legend>
                <div id="editForm1" style="padding:5px;">
                    <input class="mini-hidden" name="id"/>
                    <table style="width:100%;">
                        <tr>
                            <td >代码：</td>
                            <td ><input id="code" name="code" class="mini-textbox" /></td>
                            <td >中文名称：</td>
                            <td ><input id="cnName" name="cnName" class="mini-textbox" /></td>
                            <td >英文名称：</td>
                            <td ><input name="enName" class="mini-textbox" /></td>
                        </tr>
                        <tr>
                            <td>是否默认：</td>
                            <td><input id="select" name="selected" class="mini-checkbox" data="Genders"/></td>
                            <td>父代码：</td>
                            <td><input id="age" name="age" textName="parentCode_cnName" class="mini-buttonedit" minValue="0" maxValue="200" value="25"  /></td>
                            <td>顺序：</td>
                            <td><input name="srl" class="mini-spinner" /></td>
                        </tr>
                        <tr>
                            <td>应用属性：</td>
                            <td><input id="Text3" name="codeAttribute_cnName" textName="codeAttribute_cnName" class="mini-buttonedit" minValue="0" maxValue="200" value="25"  /></td>
                            <td>有效开始：</td>
                            <td><input id="birthday" name="startDate" class="mini-datepicker" style="width:100%;" /></td>
                            <td>有效结束：</td>
                            <td><input id="Text1" name="endDate" class="mini-datepicker" /></td>
                        </tr>
                        <tr>
                            <td>备注：</td>
                            <td colspan="3"><input id="Text2" style="width:100%;" name="remark" class="mini-textarea" /></td>
                        </tr>
                    </table>
                </div>
            </fieldset>
        </div>
    </div>

</body>
</html>


作者: felt    时间: 2014-9-23 09:57:38

tabs你设置了100%，等于body高度，而实际上你tabs外还有一个toolbar,造成高度大于body高度，撑开了，你页面又设置了overflow：hidden，最下面的隐藏掉了
tabs外面包一层mini-fit，会帮你计算页面剩余高度，撑满
作者: bl00071    时间: 2014-9-23 10:08:50

felt 发表于 2014-9-23 09:57
tabs你设置了100%，等于body高度，而实际上你tabs外还有一个toolbar,造成高度大于body高度，撑开了，你页面 ...

加mini-fit，可以了，谢谢



欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2