Vaadin Panel have a 18px margin is it possible to remove it ?

Hi I would like to remove that border that is in a DIV that is bellow the Vertical Default Layout DIV that is inside the Vaadin Panel.

Is it possible to remove that ? II am using a customLayout with css and I can easly inject css in those panels but I cannot find a way to cancel those Margins as I cannot access them directly, because the margin is inside a DIV that is not the Panel DIV ot the PANEL default Layout DIV.

HERE IS MY CONTENT

How can I cancel the margins (RED) ???

You have to alter or replace the content of a panel, which is the root element for the panel.

This is one way of doing it:

Panel panel = new Panel("My panel");
AbstractLayout panelLayout = (AbstractLayout) panel.getContent();
panelLayout.setMargin(false);

Label label = new Label("Yo, dude!");
panel.addComponent(label);

Thank you very much… I could not think about this solution, worked perfectly.

I guess my mind got into fixing it by CSS tweaks and forgot all my java :smiley:

Thanks !

For posterity…

“setMargin” adds/removes a default amount of space around the
outside
of the layout:

  myLayout.setMargin( boolean ); 

“setSpacing” adds/removes a default amount of space between the widgets contained
inside
the layout:

  myLayout.setSpacing( boolean ); 

These two options are the simple route (Java) to control spacing.
For finer tuning, you have to go the complex route: CSS and themes.

This regards Vaadin 6.
It’s been suggested Vaadin 7 may include features for finer tuning on the Java side.

–Basil Bourque

Excellent. Jonas thank you for helping us.

There seems to be a hidden VerticalLayout under the main window that is the parent of the first application defined panel. Disabling the margin on this using the technique above worked.

Hi
I am using Reindeer theme, so in that panel size is fixed, So i want to increase the size of the panel content.
can any one help on this.

Hi!

What do you with that the panel size is fixed. Panel has the same controls as all other components in setting the size, namely setWidth() and setHeight(). The content of the panel gets all the available space that the Panel has, except for the borders. The Panel’s layout would then also have to take as much space as possible, for example ((AbstractLayout) panel.getContent()).setWidth(“100%”);, but that should be the default anyhow.

Hi Jansson,

Thanks for the reply …,

              I want to put heading kind of thing to my application,  so for that I am using reindeer theme in that I used panel .

VerticalLayout layout = new VerticalLayout();

    Panel panel = new Panel("Hybrid Cloud Data Manager");
    panel.setWidth("500px");
    panel.setHeight("700px");
    panel.addStyleName("styles");
    panel.setSizeFull();
    layout.addComponent(panel);       
    layout.setComponentAlignment(panel, Alignment.MIDDLE_CENTER);

This is the screen shot of that application.

In that above screen shot i want to increase the text size of the “Hybrid Cloud Data Manager”

The screenshot seems to be missing as I can’t see it.

Is it the Panels font size that you want to increase?

You should be able to do it with css. This should do the trick: .styles.v-panel-caption { font-size: 24px; line-height: 30px; }

Yes i tried this way by placeing SCC at under webapp folder → VAADIN–>themes–> mytheme–>styles.css
the code of styles.css

@import “…/reindeer/legacy-styles.css”;

.styles.v-panel-caption {
font-size: 24px;
line-height: 30px;
}
.v-app {
background: yellow;
}
.backColorGrey{
background-color:#ACACAC;

And one more thing … I using Maven Project, can you help me how to add css in to java file, and where this css file to be placed exactly …