Merge "Fixed ComboBox width problems in all themes (#10484)"

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