--- title: CssLayout order: 12 layout: page --- [[layout.csslayout]] = CssLayout ifdef::web[] [.sampler] image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/layout/css-layout"] endif::web[] [classname]#CssLayout# allows strong control over styling of the components contained inside the layout. The components are contained in a simple DOM structure consisting of [literal]#++

++# elements. By default, the contained components are laid out horizontally and wrap naturally when they reach the width of the layout, but you can control this and most other behaviour with CSS. You can also inject custom CSS for each contained component. As [classname]#CssLayout# has a very simple DOM structure and no dynamic rendering logic, relying purely on the built-in rendering logic of the browsers, it is the fastest of the layout components. The basic use of [classname]#CssLayout# is just like with any other layout component: [source, java] ---- CssLayout layout = new CssLayout(); // Component with a layout-managed caption and icon TextField tf = new TextField("A TextField"); tf.setIcon(new ThemeResource("icons/user.png")); layout.addComponent(tf); // Labels are 100% wide by default so must unset width Label label = new Label("A Label"); label.setWidth(Sizeable.SIZE_UNDEFINED, 0); layout.addComponent(label); layout.addComponent(new Button("A Button")); ---- The result is shown in <>. Notice that the default spacing and alignment of the layout is quite crude and CSS styling is nearly always needed. [[figure.layout.csslayout.basic]] .Basic Use of [classname]#CssLayout# image::img/csslayout-basic.png[width=60%, scaledwidth=100%] The [literal]#++display++# attribute of [classname]#CssLayout# is [literal]#++inline-block++# by default, so the components are laid out horizontally following another. [classname]#CssLayout# has 100% width by default. If the components reach the width of the layout, they are wrapped to the next "line" just as text would be. If you add a component with 100% width, it will take an entire line by wrapping before and after the component. [[layout.csslayout.injection]] == CSS Injection Overriding the [methodname]#getCss()# method allows injecting custom CSS for each component. The CSS returned by the method is inserted in the [parameter]#style# attribute of the [literal]#++

++# element of the component, so it will override any style definitions made in CSS files. [source, java] ---- CssLayout layout = new CssLayout() { @Override protected String getCss(Component c) { if (c instanceof Label) { // Color the boxes with random colors int rgb = (int) (Math.random()*(1<<24)); return "background: #" + Integer.toHexString(rgb); } return null; } }; layout.setWidth("400px"); // Causes to wrap the contents // Add boxes of various sizes for (int i=0; i<40; i++) { Label box = new Label(" ", ContentMode.HTML); box.addStyleName("flowbox"); box.setWidth((float) Math.random()*50, Sizeable.UNITS_PIXELS); box.setHeight((float) Math.random()*50, Sizeable.UNITS_PIXELS); layout.addComponent(box); } ---- The style name added to the components allows making common styling in a CSS file: [source, css] ---- .v-label-flowbox { border: thin black solid; } ---- <> shows the rendered result. [[figure.layout.csslayout.getcss]] .Use of [methodname]#getCss()# and line wrap image::img/csslayout-getcss.png[width=60%, scaledwidth=100%] [[layout.csslayout.compatibility]] == Browser Compatibility The strength of the [classname]#CssLayout# is also its weakness. Much of the logic behind the other layout components is there to give nice default behavior and to handle the differences in different browsers. With [classname]#CssLayout#, you may need to make use of the browser-specific style classes in the root element of the application to write browser specific CSS rules. // TODO: ... described in <> Some features in the other layouts are not even solvable in pure CSS, at least in all browsers. [[layout.csslayout.css]] == Styling with CSS [source, css] ---- .v-csslayout {} .v-csslayout-margin {} .v-csslayout-container {} ---- The [classname]#CssLayout# component has [literal]#++v-csslayout++# root style. The margin element with [literal]#++v-csslayout-margin++# style is always enabled. The components are contained in an element with [literal]#++v-csslayout-container++# style. For example, we could style the basic [classname]#CssLayout# example shown earlier as follows: [source, css] ---- /* Have the caption right of the text box, bottom-aligned */ .csslayoutexample .mylayout .v-csslayout-container { direction: rtl; line-height: 24px; vertical-align: bottom; } /* Have some space before and after the caption */ .csslayoutexample .mylayout .v-csslayout-container .v-caption { padding-left: 3px; padding-right: 10px; } ---- The example would now be rendered as shown in <>. [[figure.layout.csslayout.styling]] .Styling [classname]#CssLayout# image::img/csslayout-styling.png[width=50%, scaledwidth=70%] Captions and icons that are managed by the layout are contained in an element with [literal]#++v-caption++# style. These caption elements are contained flat at the same level as the actual component elements. This may cause problems with wrapping in [literal]#++inline-block++# mode, as wrapping can occur between the caption and its corresponding component element just as well as between components. Such use case is therefore not feasible. ove-control-block'>vstakhov-remove-control-block Rapid spam filtering system: https://github.com/rspamd/rspamdwww-data

about summary refs log tree commit diff stats

path: root/circle.yml

blob: cc1d20479b30e24a7133bcff79023d1a586f7491 (plain)