CODEWITHSUNDEEP
vaadinvaadin12
Jonathan Sylvester
Jonathan Sylvester

Reputation: 1329

Controlling spacing size in Vaadin 12/13 horizontal/vertical layouts

In Vaadin 12/13, we can turn on/off spacing in a veritcal/horizontal layout by calling setSpacing(...). But, what if we want spacing but a much smaller amount of spacing? How can we (via Java) set the spacing to a much smaller amount? (For margins and padding, I figured out the css -- it's a straightfoward this.getStyle().set("margin", "2rem") or this.getStyle().set("padding", "2rem") etc., but I couldn't figure it out for spacing. Also, is it "dangerous" if we also run setSpacing(true) (if we do it before any code we write to explicilty set a different value for the spacing?)

Upvotes: 0

Views: 1036

Answers (2)

cfrick
cfrick

Reputation: 37008

While writing all things on the server/JVM side seem tempting, you end up littering your code with style manipulation.

Usually a better place do setup things like that is in the actual styles of your application. This is an example now to do it (uses v13 beta 2, the code is Groovy - the take away there is just to add a theme to the element).

<dom-module id="vertical-layout-different-spacing" theme-for="vaadin-vertical-layout">
    <template>
        <style>
            :host([theme~="spacing"][theme~="xs"]) ::slotted(*) {
                margin-top: 8px;
            }
            :host([theme~="spacing"][theme~="xl"]) ::slotted(*) {
                margin-top: 32px;
            }
        </style>
    </template>
</dom-module>

def demoContent = { theme ->
    new VerticalLayout(
            *[1, 2, 3].collect{ new Div(new Text("Text $it")) }
    ).tap {
        element.themeList.add(theme)
    }
}
content.add(
        // styles `xs` and `xl` are defined in the style override
        demoContent('xs'),
        demoContent('m'),
        demoContent('xl'),
)

If you are using Lumo and you are on v13 already, there is a compact variant of the theme, if that is all you are after:

https://vaadin.com/releases/vaadin-13#compact-theme

If you are using the Material theme, then there is already built in support for different spacings. See https://cdn.vaadin.com/vaadin-material-styles/1.2.0/demo/ordered-layouts.html ; The names forthe theme to add are e.g. spacing-xl

Upvotes: 1

Tatu Lund
Tatu Lund

Reputation: 10623

Probably the easiest way to customize the spacing is to set using the predefined custom properties as described in this document. As you see, the "padding" is the right way to do.

https://cdn.vaadin.com/vaadin-lumo-styles/1.4.1/demo/sizing-and-spacing.html#spacing

Upvotes: 1

Related Questions