Embedded component (image) and setWidth resizing both component and image

I have the following code:

HorizontalLayout layout = new HorizontalLayout();

Embedded image = new Embedded(null,new ThemeResource("img/image.png"));


layout.setComponentAlignment(image, Alignment.MIDDLE_CENTER);


I wanted/expected the Embedded image to be 60% of the layout’s width (which should be the size of the screen). Unfortunately, it looks like the Embedded component is 60% of the layout’s width, but it also resized the image within the Embedded component 60%.

Here is the HTML from FireBug:

<div style="float: left; margin-left: 0px;">
    <div style="overflow: hidden; width: 1564px; height: 67px;" class="v-horizontallayout">
        <div style="overflow: hidden; margin: 0px; width: 1564px; height: 67px;">
            <div style="height: 67px; width: 1564px; overflow: hidden; float: left; padding-left: 0px; padding-top: 0px;">
                <div style="float: left; margin-left: 313px;">
                    <div class="v-embedded v-embedded-image" style="width: 938px; height: 67px;">
                        <img style="width: 60%;" src="/StreemNotify/VAADIN/themes/mytheme/img/image.png"></div>
                <div style="width: 0px; height: 0px; clear: both; overflow: hidden;"></div>

As you can see, the width of the screen is 1564px. The width of the Embedded component is 938px (60% of 1564). The img tag within the Embedded component is also set to a style of 60%.

The result is that my image is not centered (because the Embedded component is centered, but the image within it is only 60%), and my image is smaller than I intended.

Is this a bug, or am I doing something wrong?

Best Regards,


I have the same Problem here. I want to resize the Embedded, but not the Image!

Kind Regards

Definitely looks like a bug. Could you create a new ticket in our
, thanks!

As a workaround, try this little CSS snippet:

 img {
    width: 100% !important;