From 991dcf9fa63273e15b38abaca5f4ac792ca94b7e Mon Sep 17 00:00:00 2001 From: Artur Signell Date: Mon, 7 Jan 2013 23:37:04 +0200 Subject: [PATCH] Fixed ComboBox width problems in all themes (#10484) Change-Id: Ia8181cd9c9d6a9183083408c55f9c3f28c72fb29 --- .../VAADIN/themes/base/select/select.scss | 7 +++- .../chameleon/components/selects/selects.scss | 7 +++- .../VAADIN/themes/liferay/select/select.scss | 10 ++++-- .../VAADIN/themes/reindeer/select/select.scss | 9 +++-- .../VAADIN/themes/runo/select/select.scss | 7 +++- .../uitest/components/SelectsCssTest.java | 33 +++++++++++++++---- 6 files changed, 59 insertions(+), 14 deletions(-) diff --git a/WebContent/VAADIN/themes/base/select/select.scss b/WebContent/VAADIN/themes/base/select/select.scss index 31de83d859..80957b16a3 100644 --- a/WebContent/VAADIN/themes/base/select/select.scss +++ b/WebContent/VAADIN/themes/base/select/select.scss @@ -1,5 +1,8 @@ @mixin base-select($primaryStyleName : v-select) { +$select-button-width : 1em; +$select-button-negative-width : -1em; + .#{$primaryStyleName} { text-align: left; } @@ -59,6 +62,7 @@ white-space: nowrap; text-align: left; display: inline-block; + padding-right: $select-button-width; /* Space for the button */ } .v-filterselect .v-icon { float: left; @@ -80,7 +84,8 @@ .v-filterselect-button { display: inline-block; cursor: pointer; - width: 1em; + width: $select-button-width; + margin-right: $select-button-negative-width; height: 1em; background: transparent url(../common/img/sprites.png) no-repeat -5px -8px; } diff --git a/WebContent/VAADIN/themes/chameleon/components/selects/selects.scss b/WebContent/VAADIN/themes/chameleon/components/selects/selects.scss index 76ff1acfef..767daa7f42 100644 --- a/WebContent/VAADIN/themes/chameleon/components/selects/selects.scss +++ b/WebContent/VAADIN/themes/chameleon/components/selects/selects.scss @@ -1,7 +1,11 @@ @mixin chameleon-selects($primaryStyleName : v-filterselect) { +$select-button-width : 16px; +$select-button-negative-width : -16px; + .#{$primaryStyleName} { overflow: hidden; + padding-right: $select-button-width; /* Space for the button */ } &.v-app input.#{$primaryStyleName}-input { @@ -26,7 +30,8 @@ } .#{$primaryStyleName}-button { - width: 16px; + width: $select-button-width; + margin-right: $select-button-negative-width; height: 1.2em; background-position: -5px -11px; opacity: .4; diff --git a/WebContent/VAADIN/themes/liferay/select/select.scss b/WebContent/VAADIN/themes/liferay/select/select.scss index d62bb43242..5ae302be9a 100644 --- a/WebContent/VAADIN/themes/liferay/select/select.scss +++ b/WebContent/VAADIN/themes/liferay/select/select.scss @@ -1,5 +1,8 @@ @mixin liferay-select { +$select-button-width : 24px; +$select-button-negative-width : -24px; + &.v-app select, .v-window select { padding: 1px; @@ -8,9 +11,12 @@ select { background-color: #fff; } - +.v-filterselect { + padding-right: $select-button-width; /* Space for the button */ +} .v-filterselect-button { - width: 24px; + width: $select-button-width; + margin-right: $select-button-negative-width; height: 24px; background: transparent url(../common/buttons_sprites.png) no-repeat 0 0; } diff --git a/WebContent/VAADIN/themes/reindeer/select/select.scss b/WebContent/VAADIN/themes/reindeer/select/select.scss index 1cfd944967..a15ba4ab87 100644 --- a/WebContent/VAADIN/themes/reindeer/select/select.scss +++ b/WebContent/VAADIN/themes/reindeer/select/select.scss @@ -1,11 +1,14 @@ @mixin reindeer-select($primaryStyleName : v-filterselect) { +$select-button-width : 25px; +$select-button-negative-width : -25px; + .#{$primaryStyleName} { height: 24px; background-repeat: no-repeat; background-image: url(img/left.png); /** sprite-ref: verticals; sprite-margin-bottom: 1px */ padding-left: 2px; - padding-right: 25px; /* Space for the button */ + padding-right: $select-button-width; /* Space for the button */ } &.v-app .#{$primaryStyleName}-input, .v-window .#{$primaryStyleName}-input, @@ -38,12 +41,12 @@ } .#{$primaryStyleName}-button { overflow: hidden; - width: 25px; + width: $select-button-width; height: 24px; background-position: 0 0; background-image: url(img/right.png); /** sprite-ref: verticals ; sprite-margin-bottom: 1px */ cursor: default; - margin-right: -25px; + margin-right: $select-button-negative-width; } .#{$primaryStyleName}-button:hover { background-image: url(img/right-hover.png); /** sprite-ref: verticals */ diff --git a/WebContent/VAADIN/themes/runo/select/select.scss b/WebContent/VAADIN/themes/runo/select/select.scss index fc203a35fa..39eb0c9bde 100644 --- a/WebContent/VAADIN/themes/runo/select/select.scss +++ b/WebContent/VAADIN/themes/runo/select/select.scss @@ -1,5 +1,8 @@ @mixin runo-select($primaryStyleName : v-filterselect) { +$select-button-width: 25px; +$select-button-negative-width: -25px; + .v-select-select { font-size: 13px; } @@ -18,6 +21,7 @@ height: 23px; background: transparent url(img/bg-left-filter.png) no-repeat; padding-left: 4px; + padding-right: $select-button-width; /* Space for the button */ } &.v-app .#{$primaryStyleName} .#{$primaryStyleName}-input, .v-window .#{$primaryStyleName} .#{$primaryStyleName}-input, @@ -46,7 +50,8 @@ outline-offset: -4px; } .#{$primaryStyleName}-button { - width: 25px; + width: $select-button-width; + margin-right: $select-button-negative-width; height: 23px; background: transparent url(img/bg-right-filter.png); } diff --git a/uitest/src/com/vaadin/tests/components/uitest/components/SelectsCssTest.java b/uitest/src/com/vaadin/tests/components/uitest/components/SelectsCssTest.java index 4da683788b..af09b1007d 100644 --- a/uitest/src/com/vaadin/tests/components/uitest/components/SelectsCssTest.java +++ b/uitest/src/com/vaadin/tests/components/uitest/components/SelectsCssTest.java @@ -4,7 +4,7 @@ import com.vaadin.tests.components.uitest.TestSampler; import com.vaadin.ui.AbstractSelect; import com.vaadin.ui.ComboBox; import com.vaadin.ui.Component; -import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.GridLayout; import com.vaadin.ui.ListSelect; import com.vaadin.ui.NativeSelect; import com.vaadin.ui.OptionGroup; @@ -12,12 +12,13 @@ import com.vaadin.ui.Select; import com.vaadin.ui.TwinColSelect; import com.vaadin.ui.themes.ChameleonTheme; -public class SelectsCssTest extends HorizontalLayout { +public class SelectsCssTest extends GridLayout { private TestSampler parent; private int debugIdCounter = 0; public SelectsCssTest(TestSampler parent) { + super(10, 1); this.parent = parent; setSpacing(true); setWidth(null); @@ -53,18 +54,35 @@ public class SelectsCssTest extends HorizontalLayout { createDummyData(ns); addComponent(ns); - createComboBoxWith(null, null); - createComboBoxWith("CB Search", ChameleonTheme.COMBOBOX_SEARCH); + createComboBoxWith(null, null, null); + createComboBoxWith("CB Search", ChameleonTheme.COMBOBOX_SEARCH, null); createComboBoxWith("SelectButton", - ChameleonTheme.COMBOBOX_SELECT_BUTTON); + ChameleonTheme.COMBOBOX_SELECT_BUTTON, null); ListSelect ls = new ListSelect(); ls.setId("select" + debugIdCounter++); createDummyData(ls); addComponent(ls); + + s = new Select("Basic select"); + s.setId("select" + debugIdCounter++); + s.setWidth("100px"); + addComponent(s); + + s = new Select("Select with items"); + s.setWidth("100px"); + s.setId("select" + debugIdCounter++); + createDummyData(s); + addComponent(s); + + createComboBoxWith(null, null, "100px"); + createComboBoxWith("CB Search", ChameleonTheme.COMBOBOX_SEARCH, "100px"); + createComboBoxWith("SelectButton", + ChameleonTheme.COMBOBOX_SELECT_BUTTON, "100px"); } - private void createComboBoxWith(String caption, String primaryStyleName) { + private void createComboBoxWith(String caption, String primaryStyleName, + String width) { ComboBox cb = new ComboBox(); cb.setId("select" + debugIdCounter++); if (caption != null) { @@ -74,6 +92,9 @@ public class SelectsCssTest extends HorizontalLayout { if (primaryStyleName != null) { cb.addStyleName(primaryStyleName); } + if (width != null) { + cb.setWidth(width); + } createDummyData(cb); addComponent(cb); -- 2.39.5