How to modify internal vaadin divs in an HorizontalLayout


We are using HorizontalLayout from 6.8.12 version of Vaadin, when we add this type of component to the main window, automatically Vaadin inserts some HTML tags like

with different styles. For example, in our case, it is appearing next new tags:


Is it possible to remove this Html Tags? How to set empty styles for these DIVs?

Thanks in advance, best regards

Those divs are created by Vaadin, because it needs them to provide proper layouting. If you remove them (which you propably can do, if you extend the client side widget), the HorizontalLayout won’t work anymore. If your looking for a simpler layout, try the CssLayout instead.

Thanks for your quickly response, We have tried with CSS Layout and it has improved the behaviour of our aplication. By the way, we still have the next doubt: How to set empty styles in Vaadin? In other words, how can we order to Vaadin not to put
style="overflow: hidden;

Thanks in advance, best regards

You can’t. All Vaadin layouts are designed to work in a specific way, with eachother. You are overriding a lot of the features that make Vaadin so versatile. You should look into the other simpler layouts in vaadin as well; AbsoluteLayout and CustomLayout.

What kind of an application are you developing? I’m just curious since you apparently want more flexibility than Vaadin offers by default.

Thank you so much Thomas!

Finally we are going to use CustomLayout, the reason we were searching more flexibility is because we need to create a new web portal by using an HTML prototype, so we have to merge our base HTML with the generated by Vaadin. However we think that with Custom Layout we can solve our problem.

Best regards

Yes, CustomLayouts are definitely the way to go if you need full control over your HTML.