Я занимаюсь разработкой веб-приложения с использованием фреймворка Vaadin. У меня небольшая проблема с модальными окнами и их содержимым. Как объяснено на картинках ниже:
Это мой CSS:
.inventory-switchsubscription-modal-window {
min-height: 290px;
min-width: 1060px;
}
Хорошо, так как вы видите, что окно, которое я указал в CSS, имеет минимальную высоту и минимальную ширину, изменение размера не затрагивается, но его содержимое есть! Кто-нибудь знает параметр CSS Window или какой-то другой прием, который я могу использовать, чтобы СОДЕРЖАНИЕ модального окна «слушало» спецификации 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;
}