Examples of CssLayout

• com.vaadin.ui.CssLayout
  CssLayout is a layout component that can be used in browser environment only. It simply renders components and their captions into a same div element. Component layout can then be adjusted with css.

  In comparison to {@link HorizontalLayout} and {@link VerticalLayout}

  • rather similar server side api
  • no spacing, alignment or expand ratios
  • much simpler DOM that can be styled by skilled web developer
  • no abstraction of browser differences (developer must ensure that the result works properly on each browser)
  • different kind of handling for relative sizes (that are set from server side) (*)
  • noticeably faster rendering time in some situations as we rely more on the browser's rendering engine.

  With {@link CustomLayout} one can often achieve similar results (good lookinglayouts with web technologies), but with CustomLayout developer needs to work with fixed templates.

  By extending CssLayout one can also inject some css rules straight to child components using {@link #getCss(Component)}.

  (*) Relative sizes (set from server side) are treated bit differently than in other layouts in Vaadin. In cssLayout the size is calculated relatively to CSS layouts content area which is pretty much as in html and css. In other layouts the size of component is calculated relatively to the "slot" given by layout.

  Also note that client side framework in Vaadin modifies inline style properties width and height. This happens on each update to component. If one wants to set component sizes with CSS, component must have undefined size on server side (which is not the default for all components) and the size must be defined with class styles - not by directly injecting width and height. @since 6.1 brought in from "FastLayouts" incubator project

Examples of com.vaadin.ui.CssLayout