Размер содержимого окна не зависит от Window min -height -width

Я разрабатываю веб-приложение с использованием фреймворка Vaadin. У меня есть небольшая проблема с модальными окнами и их содержимым. Как показано на рисунках ниже:

Прежде чем я начну изменять размер

При уменьшении модального окна

Это мой CSS:

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

Итак, как вы видите окно, которое я указал в CSS, чтобы иметь минимальную высоту и минимальную ширину, не зависит от изменения размера, но его содержимое! Кто-нибудь знает параметр Window CSS или какой-либо другой трюк, который я могу использовать, чтобы СОДЕРЖИМОЕ модального окна «слушало» спецификации CSS окна и не уменьшало его размер?

Спасибо!

Изменить: вот сгенерированная разметка и CSS, предоставленные темой Vaadin.

    <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;
}

AndroidHustle 20.09.2011 источник

comment

Нам нужно увидеть некоторую разметку и CSS для этой разметки. Мы не можем сказать вам о проблеме, не видя, как структурирован контент и каков его css. - Erik Funkenbusch 20.09.2011

comment

@Mystere Man: Хорошо ... предоставить разметку будет не так просто, поскольку я не пишу ее сам, все это создается с помощью фреймворка. Сгенерированную разметку, которую я получаю, действительно сложно понять, как вы, наверное, понимаете. CSS, который я предоставил, действительно является единственным CSS, который должен влиять на это поведение, любой другой специфичный для компонента CSS предоставляется общей темой Vaadin и может быть легко переопределен, когда я знаю, какие свойства CSS (или другие) необходимы. Я знаю, что, вероятно, мог бы указать минимальную ширину содержимого, чтобы стереть эту проблему, но я хотел посмотреть, есть ли еще практическое решение. - AndroidHustle 20.09.2011

comment

Ну, это просто не так. CSS работает по разметке, вам нужно посмотреть на фактически сгенерированный CSS, чтобы сказать, что он делает. Просто видеть CSS, который вы предоставляете, бесполезно, потому что мы не знаем, как он применяется к разметке. - Erik Funkenbusch 20.09.2011

comment

ну, CSS на самом деле не генерируется, а скорее импортируется. Если вы говорите, что CSS работает с разметкой, значит, класс CSS влияет на тег разметки, который использует тот же класс, тогда да, я знаю. Я добавил разметку и CSS сейчас, так что если вы хотите взглянуть на это, я был бы признателен. - AndroidHustle 21.09.2011

Ответы (1)

arrow_upward
0
arrow_downward

Простите, что не тестировал, а делал вид, что примерно так и есть ваша разметка:

<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;
}

Andrea 20.09.2011

comment

спасибо, это было хорошее предложение, но оно сильно испортило макет контента... =) И, к сожалению, не помогло... =\ - AndroidHustle; 20.09.2011

comment

@AndroidHustle - Верно, потому что мы не видим разметки, мы просто догадываемся из воздуха. - Erik Funkenbusch; 20.09.2011

Размер содержимого окна не зависит от Window min -height -width

Ответы (1)

Похожие вопросы