Vaadin and responsive web design

Hi everyone,

Considering the growing amount of people browsing with their tablets/smartphones, we’re seriously considering redesigning our website according to responsive web design. So we’re currently analysing the impact on our forms/portlets, which are developped using Vaadin. My first worry is the inline style Vaadin puts in HTML tags (I already “complained” about it on this forum). I don’t think it’s compatible with responsive web design.

Is the Vaadin project team working on responsive web design in the near future ? Or will the next version Vaadin at least allow to disable inline style ?
I understand the (obvious) choice of having inline style for layouts like Horizontal/Vertical/GridLayout, but it would be nice if we had a method to enable/disable inline style for any element inside a Custom/CssLayout.

Hi!

Check out the latest version of Vaadin 7 and you’ll see most of the inline styles gone from the layouts. GridLayout and AbsolutLlayout should be the only ones with inline stules left (not 100% sure about FormLayout).

Hi Jouni, and thanks for your answer!

When you say “inline styles are gone from the layouts”, does it mean they’re gone from the top layout div (e.g.

) or also from any div inside the layout ?
Cause the inline style often appears on components inside layouts, intermediate divs like “…-container” or “…-wrapper”, or even worse divs with no CSS class at all (making it really hard to overwrite).

Hi,

The CssLayout and CustomLayout should be inline style-free now, only the size, if set, from the server is added as an inline style (this applies to all components/layouts). Note, also, that CssLayout now only has one DIV element instead of the previous three nested DIVs.

The Vertical and HorizontalLayouts only have inline styles when expand ratios are used, or when a component has a relative height + caption, but those should not make your life much harder when styling the components themselves.

And as I said, GridLayout still adds plenty of inline styles, and AbsoluteLayout also to some extent. I checked the FormLayout, and it doesn’t use inline styles.

Many of the core components have also reduced the amount of inline styles, but many are still using them also, so you need to check the DOM yourself to really see the changes for individual components.

This is really good news for us, this should greatly reduce the number of DOM elements for some of our applications, and we’ll be able to get rid of the “!important” hack in our CSS :smiley: