Directory

← Back

SpaceWrapper

SpaceWrapper - if you do not want to bloat your css files with margins and paddings

Author

Rating

Popularity

<100

By using SpaceWrapper you can avoid bloating your css file with unnecessary rules. For instance, a label that needs to be a little repositioned.

To do it the "old" way, you may add a stylename to the label and then edit the theme's css-file. But what if you have a lot of quirks like this, or what if you want to dynamically change the paddings or margins dynamically?

With SpaceWrapper, this is easy. You can wrap any AbstractComponent, and the SpaceWrapper also takes care of the component sizing. An important thing to note, is that after you wrapped your component, if you want to do any sizing operations, you should do such via the wrapper. Changing the size of your wrapper, also changes the contained component in the same fashion. For instance, if you want to set your contained label to 100px wide, you instead call setWidth() of the wrapper.

With SpaceWrapper, you can dynamically create custom margins and paddings to your component. The SpaceWrapper itself is invisible.

Please check out the demo, where a layout has been wrapped. The red background has been added to hilight the wrapper.

Sample code

// Wrapping a button and adding some margin to it
mySpacedButton b = new Button("Hello");
SpaceWrapper sw = new SpaceWrapper(mySpacedButton);
sw.setMarginTop("35px");
mainLayout.addComponent(sw);

// Wrapping a layout and adding some padding to it

HorizontalLayout hl = new HorizontalLayout();
hl.addComponent(new Label("Label 1"));
hl.addComponent(new Label("Label 2"));
SpaceWrapper sw2 = new SpaceWrapper(hl);
sw.setPaddingLeft("4em");
mainLayout.addComponent(sw2);

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Released
2010-02-19
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 6.0+
Browser
Internet Explorer
Internet Explorer
Firefox
Safari

SpaceWrapper - Vaadin Add-on Directory

SpaceWrapper - if you do not want to bloat your css files with margins and paddings SpaceWrapper - Vaadin Add-on Directory
By using SpaceWrapper you can avoid bloating your css file with unnecessary rules. For instance, a label that needs to be a little repositioned. To do it the "old" way, you may add a stylename to the label and then edit the theme's css-file. But what if you have a lot of quirks like this, or what if you want to dynamically change the paddings or margins dynamically? With SpaceWrapper, this is easy. You can wrap any AbstractComponent, and the SpaceWrapper also takes care of the component sizing. An important thing to note, is that after you wrapped your component, if you want to do any sizing operations, you should do such via the wrapper. Changing the size of your wrapper, also changes the contained component in the same fashion. For instance, if you want to set your contained label to 100px wide, you instead call setWidth() of the wrapper. With SpaceWrapper, you can dynamically create custom margins and paddings to your component. The SpaceWrapper itself is invisible. Please check out the demo, where a layout has been wrapped. The red background has been added to hilight the wrapper.
Online