Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Bug in layouts with SVG and spacing?
Using Vaadin v7.5.9, I have a HorizontalLayout defined as follows:
HorizontalLayout hl = new HorizontalLayout(); hl.setSpacing(true); hl.setWidthUndefined(); hl.setHeight("100%"); hl.addComponent(new Embedded(null, new ThemeResource("image1.svg")); ... // add more SVG images hl.addComponent(new Embedded(null, new ThemeResource("image7.svg"));
The HorizontalLayout is then added to a VerticalLayout as follows:
VerticalLayout vl = new VerticalLayout(); vl.addComponent(hl); vl.setComponentAlignment(hl, Alignment.TOP_CENTER); vl.setExpandRatio(hl, 0.06f); vl.addComponent(...); // add more components
Now, I would expect a row of spaced SVG images to appear centered atop the VerticalLayout. However, what happens is that the row of images starts where it should have started without spacing, then the images appear (spaced) and continue outside the right hand side boundary of the VerticalLayout.
That is, it appears that spacing between images is not included in the width calculation of the HorizontalLayout.
If i set the HorizontalLayout spacing to false, the row of images start at exactly the same position and is centered perfectly.
So... is this a bug in the handling of SVG images or something?
EDIT: I should add that in Firefox all the SVG images are printed centered but on top of each other, while in IE the images are centered but only every other image is visible. So this appears to be quite a mess. Am I missing something?