Force FormLayout children to shrink with the layout (#11154)

The <table> used by the FormLayout doesn't reduce its size if any child
component has locked its own size (which is the case with e.g. Table and
some other components doing explicit pixel calculations). To work around
this, we need to detect the situation, force the <table> to reduce its
width by temporarily assigning explicit widths to the cells and then
remove the forced size after all children have adjusted.

Change-Id: Iacef62979acf24c869a5cbeb82efb0c1e537ec95

2 files changed, 2 insertions, 0 deletions

diff --git a/WebContent/VAADIN/themes/base/formlayout/formlayout.scss b/WebContent/VAADIN/themes/base/formlayout/formlayout.scss
index a8006fdfe3..2e2a3213f9 100644
--- a/WebContent/VAADIN/themes/base/formlayout/formlayout.scss
+++ b/WebContent/VAADIN/themes/base/formlayout/formlayout.scss
@@ -19,6 +19,7 @@
 }
 .#{$primaryStyleName}-errorcell, .#{$primaryStyleName}-captioncell {
 	width: 1px; /* Don't use any extra space */
+	min-width: 1px;
 }
 .#{$primaryStyleName}-captioncell .v-caption {
 	overflow: visible;
diff --git a/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.scss b/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.scss
index 51b8a96b60..7f8871fdac 100644
--- a/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.scss
+++ b/WebContent/VAADIN/themes/reindeer/formlayout/formlayout.scss
@@ -2,6 +2,7 @@
 
 .#{$primaryStyleName}-errorcell {
 	width: 13px;
+	min-width: 13px;
 }
 .#{$primaryStyleName}-cell .v-errorindicator {
 	width: 13px;