jQuery MiniUI

标题: 我这个页面使用mini-fit,总是无法达到100%,填充页面 [打印本页]

作者: cuiyuanyuan 时间: 2015-9-30 13:35:09 标题: 我这个页面使用mini-fit,总是无法达到100%,填充页面

本帖最后由 cuiyuanyuan 于 2015-9-30 13:36 编辑

<div class="mini-fit">
            <div style="width: 100%; height: 100%">
                  <div style="font-weight: bold; text-align: left; padding-top: 3px; vertical-align: middle; padding-bottom: 2px; padding-left: 3px;">
                     概况:
                  </div>
                  <div style="width: 99%; text-align: left; font-family: 'Microsoft YaHei'; vertical-align: middle; font-weight: bold; font-size: 14px; padding-top: 3px; padding-left: 3px;">
                     <input  class="mini-textbox" emptytext="请填写标题，最大100字" borderstyle="border-color:#c0c0c3" vtype="maxLength:100" style="width: 100%; color: black; vertical-align: middle;" />
                  </div>
                  <div style="font-weight: bold; text-align: left; margin-top: 3px; padding-top: 3px; padding-left: 2px;">
                     值班记录:
                  </div>
                  <div class="mini-fit">
                     <div  style="width: 99%; height: 100%; padding-left: 5px; padding-right: 1px; border: 0px solid #A5ACB5; margin-left: 1px;">
                        <div style="width: 100%; height: 100%">
                              <div style="width: 35%; float: left; text-align: left; margin-top: 6px;">
                                 本班次起始时间：<label ></label>
                              </div>
                              <div style="width: 35%; float: left; text-align: left; margin-top: 3px; vertical-align: middle;">
                                 天气情况：<input  class="mini-combobox" borderstyle="border-color:#c0c0c3" style="vertical-align: middle;" textfield="text" valuefield="id" allowinput="false" shownullitem="false" />
                              </div>
                              <div style="width: 30%; float: left; text-align: left; margin-top: 6px;">
                                 值班时间：<label></label>
                              </div>
                              <div style="width: 35%; clear: both; float: left; text-align: left; margin-top: 6px;">
                                 本班次结束时间：<label></label>
                              </div>
                              <div style="width: 35%; float: left; text-align: left; margin-top: 6px;">
                                 值班人：<label></label>
                              </div>
                              <div style="width: 30%; float: left; text-align: left; margin-top: 6px;">
                                 交班时间：<label></label>
                              </div>
                              <div style="clear: both"></div>
                              <div style="vertical-align: middle; float: left; width: 20%; margin-top: 12px;">事件值班时间记录：</div>
                              <div style="vertical-align: middle; float: right; text-align: right; padding-right: 5px; width: 55%; margin-top: 3px; margin-bottom: 3px;">
                                 <a class="mini-button"  style="width: 67px; height: 20px; font-family: 'Microsoft YaHei'; vertical-align: middle">添加事件</a>
                              </div>
                              <div class="mini-fit" style="clear: both;">
                                 <div style="height: 100%; width: 100%; clear: both;">

                                    <div class="mini-datagrid" showheader="false" borderstyle="border-color:#c0c0c3" showpager="false" allowcelledit="true" allowcellselect="true" multiselect="true" style="width: 100%; height: 100%" >
                                          <div property="columns">
                                             <div field="RecEveOccurrenceTime" headeralign="center" displayfield="RecEveOccurrenceTime" align="center">
                                                时间
                  </div>
                                             <div field="RecEveEventDetail" headeralign="center" align="center">
                                                值班情况

                                             </div>
                                             <div headeralign="center" align="center" renderer="sr_SRSchedulRecordDutyDGOperationFormat">操作</div>
                                          </div>
                                    </div>
                                 </div>
                              </div>
                              <div style="clear: both; margin-top: 6px;">备  注：</div>
                              <div style="width: 100%; text-align: left; margin-top: 6px;">
                                 <textarea class="mini-textarea" borderstyle="border-color:#c0c0c3" style="width: 100%; height: 100%"></textarea>
                              </div>
                              <div style="width: 20%; padding-top: 5px; text-align: left; float: left;">
                                 <a class="mini-button"  style="width: 67px; height: 20px; font-family: 'Microsoft YaHei';">去交班</a>
                              </div>
                              <div style="width: 70%; padding-top: 5px; text-align: right; float: right;">
                                 <a class="mini-button"  style="width: 60px; height: 20px; font-family: 'Microsoft YaHei';">保存</a>
                                 <a class="mini-button "  style="width: 60px; height: 20px; font-family: 'Microsoft YaHei';">返回</a>
                              </div>
                        </div>
                     </div>
                  </div>
            </div>
         </div>
[attach]6666[/attach][attach]6666[/attach][attach]6666[/attach][attach]6666[/attach]

作者: dforce 时间: 2015-9-30 13:55:37

mini-fit根据兄弟元素的高度计算父元素剩余高度
你把块级元素并排导致计算错误
请优化你的布局

作者: cuiyuanyuan 时间: 2015-9-30 15:48:18

本帖最后由 cuiyuanyuan 于 2015-9-30 15:50 编辑

dforce 发表于 2015-9-30 13:55
mini-fit根据兄弟元素的高度计算父元素剩余高度
你把块级元素并排导致计算错误
请优化你的布局 ...

按照你说的，改了以后，有了很大改善，但是界面还有一点点长，帮忙看一下，是哪一块的原因

<div style="width: 100%;">
            <div style="font-weight: bold; text-align: left; padding-top: 3px; vertical-align: middle; padding-bottom: 2px; padding-left: 3px;">
                  概况:
            </div>
            <div style="width: 99%; text-align: left; font-family: 'Microsoft YaHei'; vertical-align: middle; font-weight: bold; font-size: 14px; padding-top: 3px; padding-left: 3px;">
                  <input id="sr_SRSchedulRecordDutyTx" class="mini-textbox" emptytext="请填写标题，最大100字" borderstyle="border-color:#c0c0c3" vtype="maxLength:100" style="width: 100%; color: black; vertical-align: middle;" />
            </div>
            <div style="font-weight: bold; text-align: left; margin-top: 3px; padding-top: 3px; padding-left: 2px;">
                  值班记录:
            </div>
         </div>
         <div id="sr_SRSchedulRecordDutyContent" style="width: 99%; padding-left: 5px; padding-right: 1px; border: 0px solid #A5ACB5; margin-left: 0px;">
            <div style="width: 100%; height: 100%">
                  <div style="width: 35%; float: left; text-align: left; margin-top: 6px;">
                     本班次起始时间：<label class="sr_SRSchedulRecordDutyStartTime" id="sr_SRSchedulRecordDutyStartTime"></label>
                  </div>
                  <div style="width: 35%; float: left; text-align: left; margin-top: 3px; vertical-align: middle;">
                     天气情况：<input id="sr_SRSchedulRecordDutyWC" class="mini-combobox" borderstyle="border-color:#c0c0c3" style="vertical-align: middle;" textfield="text" valuefield="id" allowinput="false" shownullitem="false" />
                  </div>
                  <div style="width: 30%; float: left; text-align: left; margin-top: 6px;">
                     值班时间：<label class="sr_SRSchedulRecordDutyRealTime"></label>
                  </div>
                  <div style="width: 35%; clear: both; float: left; text-align: left; margin-top: 6px;">
                     <label class="sr_SRSchedulRecordDutyEndTime" id="sr_SRSchedulRecordDutyEndTime"></label>
                  </div>
                  <div style="width: 35%; float: left; text-align: left; margin-top: 6px;">
                     值班人：<label class="sr_SRSchedulRecordDutyPerson"></label>
                  </div>
                  <div style="width: 30%; float: left; text-align: left; margin-top: 6px;">
                     交班时间：<label class="sr_SRSchedulRecordDutyShiftTime"></label>
                  </div>
                  <div style="clear: both"></div>
                  <div style="vertical-align: middle; float: left; width: 20%; margin-top: 12px;">事件值班时间记录：</div>
                  <div style="vertical-align: middle; float: right; text-align: right; padding-right: 5px; width: 55%; margin-top: 3px; margin-bottom: 3px;">
                     <a class="mini-button sr_SRSchedulRecordDutyNewBtn" id="sr_SRSchedulRecordDutyNewBtn" style="width: 67px; height: 20px; font-family: 'Microsoft YaHei'; vertical-align: middle">添加事件</a>
                  </div>
            </div>
         </div>
         <div class="mini-fit" style="clear: both; text-align:center;width:100%" id="sr_SRSchedulRecordDutyContentEvent">
            <div class="mini-datagrid" showheader="false" borderstyle="border-color:#c0c0c3" showpager="false" allowcelledit="true" allowcellselect="true" multiselect="true" style="width: 99%;margin-left:5px; height: 100%" id="sr_SRSchedulRecordDutyDG">
                  <div property="columns">
                     <div field="RecEveOccurrenceTime" headeralign="center" displayfield="RecEveOccurrenceTime" align="center">
                        时间
                              <input property="editor" grid="#sr_SRSchedulRecordDutyConfigDataGrid" id="sr_SRSchedulRecordDutyConfigSTLU" class="mini-lookup" style="width: 100%;" popupwidth="auto"
                                 popup="#sr_SRSchedulRecordDutyConfigPanel" textvalue="RecEveOccurrenceTime" />
                     </div>
                     <div field="RecEveEventDetail" headeralign="center" align="center">
                        值班情况
                              <input property="editor" class="mini-textbox" style="width: 100%;" minwidth="10" />
                     </div>
                     <div headeralign="center" align="center" renderer="sr_SRSchedulRecordDutyDGOperationFormat">操作</div>
                  </div>
            </div>
         </div>
         <div style="clear: both; margin-top: 6px;">备  注：</div>
         <div style="width: 100%; text-align: left; margin-top: 6px;">
            <textarea class="mini-textarea" id="sr_SRSchedulRecordDutyRemark" borderstyle="border-color:#c0c0c3" style="width: 100%;"></textarea>
         </div>
         <div style="width: 20%; padding-top: 5px; text-align: left; float: left;">
            <a class="mini-button sr_SRSchedulRecordDutyShiftBtn" id="sr_SRSchedulRecordDutyShiftBtn" style="width: 67px; height: 20px; font-family: 'Microsoft YaHei';">去交班</a>
         </div>
         <div style="width: 70%; padding-top: 5px; text-align: right; float: right;">
            <a class="mini-button sr_SRSchedulRecordDutySaveBtn" id="sr_SRSchedulRecordDutySaveBtn" style="width: 60px; height: 20px; font-family: 'Microsoft YaHei';">保存</a>
            <a class="mini-button sr_SRSchedulRecordDutyReturnBtn" id="sr_SRSchedulRecordDutyReturnBtn" style="width: 60px; height: 20px; font-family: 'Microsoft YaHei';">返回</a>
         </div>

[attach]6667[/attach]

作者: cuiyuanyuan 时间: 2015-9-30 16:17:34

dforce 发表于 2015-9-30 13:55
mini-fit根据兄弟元素的高度计算父元素剩余高度
你把块级元素并排导致计算错误
请优化你的布局 ...

人还在吗？我的问题看到了吗？

作者: dforce 时间: 2015-9-30 16:23:56

cuiyuanyuan 发表于 2015-9-30 15:48
按照你说的，改了以后，有了很大改善，但是界面还有一点点长，帮忙看一下，是哪一块的原因

表单那块用table做吧，有float,margin
http://www.miniui.com/demo/#src=formLayout/formLayout.html

作者: cuiyuanyuan 时间: 2015-9-30 16:29:20

dforce 发表于 2015-9-30 16:23
表单那块用table做吧，有float,margin
http://www.miniui.com/demo/#src=formLayout/formLayout.html ...

你意思是<div id="sr_SRSchedulRecordDutyContent" style="width: 99%; padding-left: 5px; padding-right: 1px; border: 0px solid #A5ACB5; margin-left: 0px;">
            <div style="width: 100%; height: 100%">
                  <div style="width: 35%; float: left; text-align: left; margin-top: 6px;">
                     本班次起始时间：<label class="sr_SRSchedulRecordDutyStartTime" id="sr_SRSchedulRecordDutyStartTime"></label>
                  </div>
                  <div style="width: 35%; float: left; text-align: left; margin-top: 3px; vertical-align: middle;">
                     天气情况：<input id="sr_SRSchedulRecordDutyWC" class="mini-combobox" borderstyle="border-color:#c0c0c3" style="vertical-align: middle;" textfield="text" valuefield="id" allowinput="false" shownullitem="false" />
                  </div>
                  <div style="width: 30%; float: left; text-align: left; margin-top: 6px;">
                     值班时间：<label class="sr_SRSchedulRecordDutyRealTime"></label>
                  </div>
                  <div style="width: 35%; clear: both; float: left; text-align: left; margin-top: 6px;">
                     <label class="sr_SRSchedulRecordDutyEndTime" id="sr_SRSchedulRecordDutyEndTime"></label>
                  </div>
                  <div style="width: 35%; float: left; text-align: left; margin-top: 6px;">
                     值班人：<label class="sr_SRSchedulRecordDutyPerson"></label>
                  </div>
                  <div style="width: 30%; float: left; text-align: left; margin-top: 6px;">
                     交班时间：<label class="sr_SRSchedulRecordDutyShiftTime"></label>
                  </div>
                  <div style="clear: both"></div>
                  <div style="vertical-align: middle; float: left; width: 20%; margin-top: 12px;">事件值班时间记录：</div>
                  <div style="vertical-align: middle; float: right; text-align: right; padding-right: 5px; width: 55%; margin-top: 3px; margin-bottom: 3px;">
                     <a class="mini-button sr_SRSchedulRecordDutyNewBtn" id="sr_SRSchedulRecordDutyNewBtn" style="width: 67px; height: 20px; font-family: 'Microsoft YaHei'; vertical-align: middle">添加事件</a>
                  </div>
            </div>
         </div>
这一块的原因吗

作者: dforce 时间: 2015-9-30 16:36:22

cuiyuanyuan 发表于 2015-9-30 16:29
你意思是

是
最下面2块也有问题，mini-fit计算的时候同级块级元素都会计算，你用float控制并排的会重复计算

作者: cuiyuanyuan 时间: 2015-9-30 16:51:25

dforce 发表于 2015-9-30 16:36
是
最下面2块也有问题，mini-fit计算的时候同级块级元素都会计算，你用float控制并排的会重复计算 ...

全部改成table,依然有那个问题

作者: cuiyuanyuan 时间: 2015-9-30 16:58:59

dforce 发表于 2015-9-30 16:36
是
最下面2块也有问题，mini-fit计算的时候同级块级元素都会计算，你用float控制并排的会重复计算 ...

<div style="font-weight: bold; text-align: left; padding-top: 3px; vertical-align: middle; padding-bottom: 2px; padding-left: 3px;">
            概况:
         </div>
         <div style="width: 99%; text-align: left; font-family: 'Microsoft YaHei'; vertical-align: middle; font-weight: bold; font-size: 14px; padding-top: 3px; padding-left: 3px;">
            <input id="sr_SRSchedulRecordDutyTx" class="mini-textbox" emptytext="请填写标题，最大100字" borderstyle="border-color:#c0c0c3" vtype="maxLength:100" style="width: 100%; color: black; vertical-align: middle;" onfocus="sr_SRSchedulRecordDutyTxFocus(e);" onblur="sr_SRSchedulRecordDutyTxBlur(e);" />
         </div>
         <div style="font-weight: bold; text-align: left; margin-top: 3px; padding-top: 3px; padding-left: 2px;">
            值班记录:
         </div>
         <div id="sr_SRSchedulRecordDutyContent" style="width: 99%; padding-left: 5px; padding-right: 1px; border: 0px solid #A5ACB5; margin-left: 1px;">
            <table style="width: 100%; height: 100%">
                  <tr>
                     <td style="width: 35%; text-align: left; vertical-align: middle;">
                        本班次起始时间：<label class="sr_SRSchedulRecordDutyStartTime" id="sr_SRSchedulRecordDutyStartTime"></label>
                     </td>
                     <td style="width: 35%; text-align: left; vertical-align: middle;">
                        天气情况：<input id="sr_SRSchedulRecordDutyWC" class="mini-combobox" borderstyle="border-color:#c0c0c3" style="vertical-align: middle;" textfield="text" valuefield="id" allowinput="false" shownullitem="false" />
                     </td>
                     <td style="width: 30%; text-align: left; vertical-align: middle;">
                        值班时间：<label class="sr_SRSchedulRecordDutyRealTime"></label>
                     </td>
                  </tr>
                  <tr>
                     <td style="width: 35%;  text-align: left; vertical-align: middle;">
                        <label class="sr_SRSchedulRecordDutyEndTime" id="sr_SRSchedulRecordDutyEndTime"></label>
                     </td>
                     <td  style="width: 35%; text-align: left;vertical-align: middle;">
                        值班人：<label class="sr_SRSchedulRecordDutyPerson"></label>
                     </td>
                     <td  style="width: 30%; text-align: left; vertical-align: middle;">
                        交班时间：<label class="sr_SRSchedulRecordDutyShiftTime"></label>
                     </td>
                  </tr>
                  <tr>
                     <td>
                        事件值班时间记录：
                     </td>
                     <td colspan="2" style="text-align:right;margin-right:5px;">
                        <a class="mini-button sr_SRSchedulRecordDutyNewBtn" id="sr_SRSchedulRecordDutyNewBtn" style="width: 67px; height: 20px; font-family: 'Microsoft YaHei'; vertical-align: middle">添加事件</a>
                     </td>
                  </tr>

            </table>
         </div>
         <div class="mini-fit"  id="sr_SRSchedulRecordDutyContentEvent">
            <div class="mini-datagrid" showheader="false" borderstyle="border-color:#c0c0c3" showpager="false" allowcelledit="true" allowcellselect="true" multiselect="true" style="width: 99%;margin-left:5px; height: 100%" id="sr_SRSchedulRecordDutyDG">
                  <div property="columns">
                     <div field="RecEveOccurrenceTime" headeralign="center" displayfield="RecEveOccurrenceTime" align="center">
                        时间
                              <input property="editor" grid="#sr_SRSchedulRecordDutyConfigDataGrid" id="sr_SRSchedulRecordDutyConfigSTLU" class="mini-lookup" style="width: 100%;" popupwidth="auto"
                                 popup="#sr_SRSchedulRecordDutyConfigPanel" textvalue="RecEveOccurrenceTime" onshowpopup="sr_SRSchedulRecordDutyConfigShowPopup" onhidepopup="sr_SRSchedulRecordDutyConfigHidePopup" />
                     </div>
                     <div field="RecEveEventDetail" headeralign="center" align="center">
                        值班情况
                              <input property="editor" class="mini-textbox" style="width: 100%;" minwidth="10" />
                     </div>
                     <div headeralign="center" align="center" renderer="sr_SRSchedulRecordDutyDGOperationFormat">操作</div>
                  </div>
            </div>
         </div>
         <div style="margin-left:5px; margin-top: 6px;">备  注：</div>
         <div style="width: 99%;margin-left:5px; text-align: left; margin-top: 6px;">
            <textarea class="mini-textarea" id="sr_SRSchedulRecordDutyRemark" borderstyle="border-color:#c0c0c3" style="width: 100%;"></textarea>
         </div>
         <table style="width: 100%;">
            <tr>
                  <td style="margin-left: 5px; text-align: left; margin-left: 5px;">
                     <a class="mini-button sr_SRSchedulRecordDutyShiftBtn" id="sr_SRSchedulRecordDutyShiftBtn" style="width: 67px; height: 20px; font-family: 'Microsoft YaHei';">去交班</a>
                  </td>
                  <td style="margin-right: 5px; text-align: right; margin-right: 5px;">
                     <a class="mini-button sr_SRSchedulRecordDutySaveBtn" id="sr_SRSchedulRecordDutySaveBtn" style="width: 60px; height: 20px; font-family: 'Microsoft YaHei';">保存</a>
                     <a class="mini-button sr_SRSchedulRecordDutyReturnBtn" id="sr_SRSchedulRecordDutyReturnBtn" style="width: 60px; height: 20px; font-family: 'Microsoft YaHei';">返回</a>
                  </td>
            </tr>
         </table>

作者: felt 时间: 2015-10-8 09:29:01

cuiyuanyuan 发表于 2015-9-30 16:58
概况:

[attach]6668[/attach]没发现什么问题，可以撑满

作者: cuiyuanyuan 时间: 2015-10-8 10:10:27

felt 发表于 2015-10-8 09:29
没发现什么问题，可以撑满

在其他浏览器，没有问题，但是在IE11下有点问题呀

作者: felt 时间: 2015-10-8 10:33:54

cuiyuanyuan 发表于 2015-10-8 10:10
在其他浏览器，没有问题，但是在IE11下有点问题呀

[attach]6669[/attach]
如图，未发现问题
请保证
1 doctype是标准的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 IE下只支持标准模式，请不要使用兼容模式

作者: cuiyuanyuan 时间: 2015-10-8 10:51:22

felt 发表于 2015-10-8 10:33
如图，未发现问题
请保证
1 doctype是标准的

我把这个页面，是放在tabs里面的，是不是与这个有关系呀

<div name="SRSchedulRecordDuty" style="width: 100%; height: 100%; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border: 0px;overflow:hidden" borderstyle="border: 0px" bodystyle="padding:0;margin:0">

这样的设置合理吗？？？

作者: felt 时间: 2015-10-8 11:02:14

cuiyuanyuan 发表于 2015-10-8 10:51
我把这个页面，是放在tabs里面的，是不是与这个有关系呀

请提供能简单重现你所说问题的html页面，不要发什么一段一段的代码
高级模式可以打包上传文件

作者: cuiyuanyuan 时间: 2015-10-8 11:27:43

felt 发表于 2015-10-8 11:02
请提供能简单重现你所说问题的html页面，不要发什么一段一段的代码
高级模式可以打包上传文件 ...

[attach]6671[/attach]

作者: felt 时间: 2015-10-8 13:04:57

cuiyuanyuan 发表于 2015-10-8 11:27

请看12楼的回复

作者: cuiyuanyuan 时间: 2015-10-8 13:27:58

felt 发表于 2015-10-8 13:04
请看12楼的回复

我给你发的那个页面，你那边可以，是吗？我按你12楼说的改的，还是不行呀

作者: felt 时间: 2015-10-8 13:33:04

cuiyuanyuan 发表于 2015-10-8 13:27
我给你发的那个页面，你那边可以，是吗？我按你12楼说的改的，还是不行呀 ...

你发的页面你确定doctype有改吗
<style>
html,body
{
height:100%;width:100%;margin:0;padding:0;
}
</style>
这些有加吗

作者: cuiyuanyuan 时间: 2015-10-8 13:55:36

本帖最后由 cuiyuanyuan 于 2015-10-8 13:56 编辑

felt 发表于 2015-10-8 13:33
你发的页面你确定doctype有改吗

html,body

我给你发的，没改，但我在本地改了，不行，就又改回去了。
我主要是想问你一下，把那个页面放在tabs中，有没有问题，在你那边，

作者: felt 时间: 2015-10-8 15:09:13

cuiyuanyuan 发表于 2015-10-8 13:55
我给你发的，没改，但我在本地改了，不行，就又改回去了。
我主要是想问你一下，把那个页面放在tabs中，有 ...

你的页面我改了doctype，加了样式，引用我本地的miniui，ie11下可以正常显示

作者: cuiyuanyuan 时间: 2015-10-8 16:40:59

felt 发表于 2015-10-8 15:09
你的页面我改了doctype，加了样式，引用我本地的miniui，ie11下可以正常显示

好吧，谢谢你了，我再看看，是不是我哪里还没有弄好，我再研究研究！！！

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)