Window content size not affected by Window min -height -width

Question

I'm developing a web application using the Vaadin framework. I have a small problem with modal windows and their content though. As explained in the pictures below:

Before I start resizing

While making the modal window smaller

This is my CSS:

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

Ok, so as you see the window that I have specified in CSS to have a min-height and a min-width is not affected by the resizing, but its content is! Does anyone know of a Window CSS parameter or some other trick I can use to make the CONTENT of the modal window "listen" to the CSS specifications of the window and not resize too small?

Thank you!

Edit: Here's the generated markup and the CSS provided by the Vaadin theme.

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

Here's the 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;
}

We need to see some markup and the css for that markup as well. We can't tell you the problem without seeing how the content is structured, and what its css is. — Erik Funkenbusch, Sep 20 '11 at 14:02
@Mystere Man: Ok... providing markup will not be that easy since I'm not writing any myself, it's all generated through the framework. The generated markup I get is really hard to comprehend, as you probably understand. The CSS I've provided is really the only CSS that should impact this behaviour, any other component specific CSS is provided by the Vaadin common theme, and can easily be overridden when I know what CSS (or other) properties are needed. I know I probably could specify a min width for the content to erase this problem, but I wanted to see if there's a more "hands on" sollution — AndroidHustle, Sep 20 '11 at 15:06
Well, that simply not the case. CSS works by markup, you have to look at the actual generated CSS in order to tell what it's doing. Just seeing the CSS you provide is of no use because we don't know how it applies to the markup. — Erik Funkenbusch, Sep 20 '11 at 16:51
well, the CSS is actually not "generated" but rather imported.. If you by "CSS works by markup" mean that the CSS class affects the markup tag that uses the same class, then yes, I know. I've added the markup and CSS now, so if you'd like to take a look at it I'd appreciate it. — AndroidHustle, Sep 21 '11 at 07:56

score 0 · Answer 1 · answered Sep 20 '11 at 13:57

0

Forgive me for not testing, but pretending that something like this is your markup:

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

This should give the div children of the modal window the min height/width

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

answered Sep 20 '11 at 13:57

Andrea

1,057
1
20
49

thanks, it was a nice suggestion but it screwed up the content layout really bad... =) And didn't help unfortunately... =\ – AndroidHustle Sep 20 '11 at 14:48
1

@AndroidHustle - Right, because we can't see the markup, we are just guessing out of thin air. – Erik Funkenbusch Sep 20 '11 at 16:54

Window content size not affected by Window min -height -width

1 Answers1