Fixed ComboBox width problems in all themes (#10484)

Change-Id: Ia8181cd9c9d6a9183083408c55f9c3f28c72fb29

5 files changed, 32 insertions, 8 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);
 }