Question

我正在使用Vaadin框架开发Web应用程序。我对模态窗口及其内容有一个小问题。如下图所示：

Before I start resizing

While making the modal window smaller

这是我的CSS：

.inventory-switchsubscription-modal-window {
    min-height: 290px;
    min-width: 1060px;
}

好的，所以当你看到我在CSS中指定的窗口具有最小高度和最小宽度不受调整大小影响，但其内容是！有没有人知道一个Window CSS参数或其他一些技巧我可以用来使模态窗口的内容“监听”窗口的CSS规范而不是调整得太小？

谢谢！

编辑：这是生成的标记和Vaadin主题提供的CSS。

    <div class="v-window v-window-inventory-switchsubscription-modal-window inventory-switchsubscription-modal-window" style="margin-left: 0px; margin-top: 0px; left: 429px; top: 365px; z-index: 10001; visibility: visible; position: absolute; overflow: visible; width: 1056px;">
     <div class="popupContent">
      <div class="v-window-wrap" style="">
       <div class="v-window-wrap2" style="">
        <div id="PID240_window_close" class="v-window-closebox"></div>
        <div class="v-window-outerheader">
         <div class="v-window-header"></div>
        </div>
        <div class="v-window-contents" style="">
         <div tabindex="0" style="overflow: auto; position: relative;">
          <div class="v-verticallayout" style="overflow: hidden; width: 1052px; height: 274px;">
           <div style="overflow: hidden; margin: 12px; width: 1028px; height: 250px;">
            <div style="height: 218px; width: 1028px; overflow: hidden; padding-left: 0px; padding-top: 0px;">
             <div style="float: left; margin-left: 0px;">
              <div class="v-panel v-panel-black-panel black-panel" style="overflow: hidden; width: 1028px;">
               <div class="v-panel-captionwrap">
                <div class="v-panel-caption v-panel-caption-black-panel" style="">
                 <span>Manage SIM Card Subscriptions</span>
                </div>
               </div>
               <div class="v-panel-content v-panel-content-black-panel" tabindex="-1" style="overflow: auto; position: relative;">
                <div class="v-verticallayout" style="overflow: hidden; width: 1026px; height: 184px;">
                 <div style="overflow: hidden; margin: 0px; width: 1026px; height: 184px;">
                  <div style="height: 67px; width: 1026px; overflow: hidden; padding-left: 0px; padding-top: 0px;">
                   <div style="float: left; margin-left: 0px;">
                    <div class="v-horizontallayout" style="overflow: hidden; width: 1026px; height: 67px;">
                     <div style="overflow: hidden; margin: 0px; width: 1026px; height: 67px;">
                      <div style="height: 67px; width: 1026px; overflow: hidden; float: left; padding-left: 0px; padding-top: 0px;">
                       <div style="float: left; margin-left: 1px;">
                        <div class="v-horizontallayout v-horizontallayout-m2m-popup-inner-panel-layout m2m-popup-inner-panel-layout" style="overflow: hidden; width: 974px; height: 17px;">
                         <div style="overflow: hidden; margin: 0px; width: 1000px; height: 17px;">
                          <div style="height: 17px; width: 497px; overflow: hidden; float: left; padding-left: 0px; padding-top: 0px;">
                           <div style="float: left; margin-left: 0px;">
                            <div class="v-label" style="width: 497px;">SIM Card (Chip Id): 1</div>
                           </div>
                          </div>
                          <div style="height: 17px; width: 497px; overflow: hidden; float: left; padding-left: 6px; padding-top: 0px;">
                           <div style="float: left; margin-left: 0px;">
                            <div class="v-label" style="width: 497px;">Customer: Max Hamburgare</div>
                           </div>
                          </div>
                          <div style="width: 0px; height: 0px; clear: both; overflow: hidden;"></div>
                         </div>
                        </div>
                       </div>
                      </div>
                       <div style="width: 0px; height: 0px; clear: both; overflow: hidden;"></div>
                     </div>
                    </div>
                   </div>
                  </div>
                   <div style="height: 117px; width: 1026px; overflow: hidden; padding-left: 0pt; padding-top: 0px;">
                    <div style="float: left; margin-left: 0px;">
                     <div class="v-verticallayout v-verticallayout-inventory-switchsububscription-panel inventory-switchsububscription-panel" style="overflow: hidden; width: 1026px; height: 105px;">
                      <div style="overflow: hidden; margin: 0px; width: 1026px; height: 105px;">
                       <div style="height: 105px; width: 1026px; overflow: hidden; padding-left: 0px; padding-top: 0px;">
                        <div style="float: left; margin-left: 26px;">
                         <div class="v-table v-table-v-table-striped v-table-striped" style="width: 974px;">
                          <div class="v-table-header-wrap" style="width: 972px;">
                           <div class="v-table-header" style="overflow: hidden;">
                            <div style="width: 900000px;">
                             <table>
                              <tbody>
                               <tr>
                                <td class="v-table-header-cell" style="width: 168px;">
                                <td class="v-table-header-cell" style="width: 140px;">
                                <td style="width: 168px;">
                                <td style="width: 166px;">
                                <td class="v-table-header-cell" style="width: 179px;">
                                <td class="v-table-header-cell" style="width: 148px;">
                               </tr>
                              </tbody>
                             </table>
                            </div>
                           </div>
                           <div class="v-table-column-selector" style="display: none;"></div>
                          </div>
                          <div class="v-table-body" tabindex="-1" style="overflow: auto; position: relative; width: 972px; height: 85px;">
                           <div class="v-table-body-noselection" style="height: 68px;">
                            <div class="v-table-row-spacer" style="height: 0px;"></div>
                            <table class="v-table-table">
                             <tbody>
                              <tr class="v-table-row" style="">
                               <td class="v-table-cell-content" style="width: 155px;">
                               <td class="v-table-cell-content" style="width: 127px;">
                               <td class="v-table-cell-content" style="width: 155px;">
                               <td class="v-table-cell-content" style="width: 153px;">
                               <td class="v-table-cell-content" style="width: 166px;">
                               <td class="v-table-cell-content" style="width: 135px;">
                              </tr>
                              <tr class="v-table-row-odd" style="">
                              <tr class="v-table-row" style="">
                              <tr class="v-table-row-odd" style="">
                             </tbody>
                            </table>
                            <div class="v-table-row-spacer" style="height: 0px;"></div>
                          </div>
                          <div tabindex="-1" style="position: fixed; top: 0px; left: 0px;"></div>
                        </div>
                        <div class="v-table-footer-wrap" style="display: none; width: 972px;">
                         <div class="v-table-footer" style="overflow: hidden;">
                          <div style="width: 900000px;">
                           <table>
                            <tbody>
                             <tr>
                              <td style="width: 167px;">
                              <td style="width: 139px;">
                              <td style="width: 167px;">
                              <td style="width: 165px;">
                              <td style="width: 178px;">
                              <td style="width: 147px;">
                             </tr>
                            </tbody>
                           </table>
                          </div>
                         </div>
                        </div>
                       </div>
                      </div>
                     </div>
                     <div style="width: 0px; height: 0px; clear: both; overflow: hidden;"></div>
                    </div>
                   </div>
                  </div>
                 </div>
                 <div style="width: 0px; height: 0px; clear: both; overflow: hidden;"></div>
                </div>
               </div>
              </div>
              <div class="v-panel-deco v-panel-deco-black-panel"></div>
             </div>
            </div>
           </div>
           <div style="height: 32px; width: 1028px; overflow: hidden; padding-left: 0pt; padding-top: 0px;">
            <div style="float: left; margin-left: 0px;">
             <div class="v-horizontallayout v-horizontallayout-m2m-modal-window-button-position m2m-modal-window-button-position" style="overflow: hidden; width: 1028px; height: 26px;">
              <div style="overflow: hidden; margin: 0px; width: 1054px; height: 26px;">
               <div style="height: 26px; width: 1054px; overflow: hidden; float: left; padding-left: 0px; padding-top: 0px;">
                <div style="float: left; margin-left: 854px;">
                 <div class="v-horizontallayout v-horizontallayout-inventory-imsi-table-positioning-B inventory-imsi-table-positioning-B" style="overflow: hidden; width: 158px; height: 26px;">
                  <div style="overflow: hidden; margin: 0px; width: 200px; height: 26px;">
                   <div style="height: 26px; width: 86px; overflow: hidden; float: left; padding-left: 0px; padding-top: 0px;">
                    <div style="float: left; margin-left: 0px;">
                     <div class="v-button" tabindex="0" role="button">
                      <span class="v-button-wrap">
                       <span class="v-button-caption">OK</span>
                      </span>
                     </div>
                    </div>
                   </div>
                   <div style="height: 26px; width: 108px; overflow: hidden; float: left; padding-left: 6px; padding-top: 0px;">
                    <div style="float: left; margin-left: 0px;">
                     <div class="v-button" tabindex="0" role="button">
                      <span class="v-button-wrap">
                       <span class="v-button-caption">Cancel</span>
                      </span>
                     </div>
                    </div>
                   </div>
                   <div style="width: 0px; height: 0px; clear: both; overflow: hidden;"></div>
                 </div>
                </div>
               </div>
              </div>
              <div style="width: 0px; height: 0px; clear: both; overflow: hidden;"></div>
             </div>
            </div>
           </div>
          </div>
          <div style="width: 0px; height: 0px; clear: both; overflow: hidden;"></div>
         </div>
        </div>
       </div>
      </div>
      <div class="v-window-footer">
       <div class="v-window-resizebox"></div>
      </div>
     </div>
    </div>
   </div>
  </div>

这是CSS：

element.style {
    left: 429px;
    margin-left: 0;
    margin-top: 0;
    overflow: visible;
    position: absolute;
    top: 365px;
    visibility: visible;
    width: 1056px;
    z-index: 10001;
}
.inventory-switchsubscription-modal-window, .v-window-contents {
    min-height: 290px;
    min-width: 1060px;
}
styles.css (rad 299)
.v-window {
    background-image: none;
}
window.css (rad 26)
.v-window, .v-popupview-popup, .v-filterselect-suggestpopup, .v-datefield-popup, .v-contextmenu, .v-Notification, .v-menubar-submenu {
    background: url("../atlas/img/grad-light-top.png") repeat-x scroll 0 0 rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 4px 4px 4px 4px;
    overflow: hidden;
}
common.css (rad 57)
.v-app, .v-window, .v-popupview-popup, .v-tooltip, .v-app input, .v-app select, .v-app button, .v-app textarea, .v-window input, .v-window select, .v-window button, .v-window textarea, .v-popupview-popup input, .v-popupview-popup select, .v-popupview-popup button, .v-popupview-popup textarea, .v-filterselect-suggestpopup, .v-datefield-popup, .v-contextmenu, .v-Notification, .v-menubar-submenu, .v-table-header-drag, .v-menubar-submenu, .v-drag-element {
    color: #666666;
    font-family: Verdana,Arial,sans-serif;
    font-size: 12px;
    line-height: 1.4;
}
common.css (rad 46)
.v-window {
    background: none repeat scroll 0 0 #FFFFFF;
}
styles.css (rad 2160)
.v-app, .v-window, .v-popupview-popup, .v-label, .v-caption {
    cursor: default;
}
styles.css (rad 273)
Inherited from body.v-generated-body
body {
    color: #666666;
    font-family: Verdana,Arial,sans-serif;
    font-size: 12px;
    line-height: 1.4;
}

Answer 1

我希望我的回答是你要找的。因此，尝试使用Rafael's CSS浏览器/窗口行为解决方案

Answer 2

原谅我没有测试，但假装这样的东西是你的标记：

<div class='inventory-switchsubscription-modal-window'>
<div>
<!--content is here-->
</div>
</div>

这应该为模态窗口的div子项提供最小高度/宽度

.inventory-switchsubscription-modal-window,
.inventory-switchsubscription-modal-window div, {
    min-height: 290px;
    min-width: 1060px;
}

窗口内容大小不受Window min -height -width的影响

2 个答案: