setting margins

Vaadin 6 / 7 / 8
1

Hello,

Very new to Vaadin and web apps in general. I am trying to set the left margin on a horizontal layout. (Beta 3). Nothing I do works. (Code Below) Also, is there an easy way to clear the style.css from the server? I seem to need to recreate a new theme each time to get rid of the old css settings.

Oh, one more thing, Vaadin is an awesome piece of work. I am a RCP developer for many years and have been charged with moving some apps to the web. This is amazingly easy to use for someone like me with no web experience and will be easy to maintain by java developers.


MY CODE:

private Component buildMenuBar() {
menuLayout = new HorizontalLayout();
menuLayout.addStyleName(“marginexample1”);
menuLayout.setSpacing(true);
menuLayout.setMargin(true);

My customer theme:

@import url(…/reindeer/styles.css);

.v-table-row-critical{
background: #FF0000; color: #000000;
}

.v-table-row-minor {
background: #FFFF00; color: #000000;
}

.v-table-row-major {
background: #FF8C00; color: #000000;
}

.v-horizontallayout-marginexample1 .v-horizontallayout-margin {
padding-left: 200px;
padding-right: 100px;
padding-top: 50px;
padding-bottom: 25px;
}

2

Hi,

Sorry for the lack of intormation in this regard. The layouts have undergone major changes from v6 to v7, and the previous method of adjusting margins no longer work.

But fear not, the new way is actually easier than the old! :slight_smile:

So instead of the long, hard-to-remember CSS selector, you can just write this:

.marginexample1 {
  padding-left: 200px;
  padding-right: 100px;
  padding-top: 50px;
  padding-bottom: 25px;
}

So you can target the main layout element directly and set the paddings. You can also use pure CSS margins, but just keep in mind that they work exactly like normal CSS margins, and are not calculated into the components width and height (so a 100% wide component with margins would actually take more space than 100%).

The migration guide needs to be updated to cover this aspect.

3

Can you be more specific, what is the problem? Are you trying to update the styles, but in the browser you still get the old styles? That might just be a browser caching issue, try cleaning up the cache of the browser.