Fixed ComboBox width problems in all themes (#10484)

Change-Id: Ia8181cd9c9d6a9183083408c55f9c3f28c72fb29

diff --git a/WebContent/VAADIN/themes/base/select/select.scss b/WebContent/VAADIN/themes/base/select/select.scss
index 31de83d859628d204b1b682147c9d81c045ea525..80957b16a385a249c2b2fa47e5cb7608dac0f2cc 100644 (file)
--- 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 76ff1acfeffbfab8083f75bddf57c1edd1cb98db..767daa7f4200cfaa0f0f40fb3d082ca6eb7521ae 100644 (file)
--- 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 d62bb43242a8285affac9945f8c2811fd59ec493..5ae302be9ad6e3c14e5356da7374a47f4e6de571 100644 (file)
--- 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 1cfd9449676963c5577eb944d5d0d088c29cf57c..a15ba4ab8798a2f15d6ae5199a55efbc72d0ff01 100644 (file)
--- 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 fc203a35fabbe1fe71c6b9ffb2188af7d0667488..39eb0c9bde50f34f27aaf91799425cbb33a7b760 100644 (file)
--- 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 4da683788b5498c39680b01d486ee388733bda5c..af09b1007dd79dc18bafc4c53115dce0527c39f0 100644 (file)
--- 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);