Layouts & Border Sizing

Hi,

In Vaadin 7, will CSS border/padding/margin be taken into account of in the core layouts? If not, consider this a heartfelt plea that it will!

I really wanted to use the GridLayout as a form of Dashboard, with each widget having a CSS border - but Vaadin 6 doesn’t take the size of the border into account, so you end up with missing/clipped borders. Which is quite vexing.

I’m going to see what I can do with the layouts in the Directory.

Cheers,

Charles.

Hi,

Actually, the
PortalLayout
allows to have arbitrary borders. Also - I think it’s quite good for building the DashBoards (especially in case you have a finite number of portlets).

cheers,
sasha.

I tend to think now that to have finer CSS control of layout and appearance, the way to go is either CustomLayout or CssLayout, depending on exact needs (CustomLayout is more rigid, unless you create the HTML on the fly, programmatically).
With these, you don’t have Vaadin computing all width and height parameters, so you can use bigger fonts, margins, padding, borders, etc.
On the other hand, you must not be afraid of Web design and browser differences… :smiley: (less critical now, even more if you drop IE6/7 support!).

Hi sasha,

I was thinking of using PortalLayout - but I’ve been having a little trouble “grokking” it.

I think you create portals, and lay them out (using a normal Vaadin layout) - and then you can add portlets into the portals, and allow (or not) portlets to be moved between them. Is that a fair summary?

What I (ultimately) want is a grid based “portal”, where a portlet can cover one or more “cells” - in other words, a user controlled GridLayout.

Anyway, I might try out the PortalLayout as it stands now, and see what I can come up with.

Cheers,

Charles

Hi Phillipe,

Yes - I use CSSLayout quite a bit. Unfortuantely, you can’t really do the equivalent of GridLayout using just CSS, more’s the pity.

Thanks,

Charles.

Well,

You’re right - the main strategy currently is like that. Thought nothing prevents you from having for instance a Header layout (CssLayout or whatever) with a Portal - that’ll consume as much width as you wish. Below - you would have the HorizontalLayout with Portals side by side.
Overall, I see your point, maybe it is currently hard to achieve with PortalLayout right now.

cheers,
sasha

Hi,

I’ve been playing with PortalLayout - nice job. It does indeed correctly cope with borders for the portlet content; however, I’d like to restyle the header too. It seems that the borders are not taken into account when sizing the header (attached image uses the following css snippet

.v-portlet-header {
        background: #EEEEEE url("images/toolbar-alpha-gradient-1x32.png") repeat-x !important;
        height: 28px;
        border-top: solid 1px #F9F9F9;
        border-left: solid 1px #F9F9F9;
        border-right: solid 1px #F9F9F9;
}

.v-portlet-content {
      border : solid 1px  #F9F9F9;
}

Or is this responsibility of the layout containing the PortalLayout?

Cheers,

Charles
12055.png

Hi,

Indeed, the header borders are not taken into the account in calculations. The good thing is that it is much easier to add then for the contents (and I will), the bad one - is that I won’t probably have a chance to do that until weekend. Please file a bug on the issue tracker if you don’t mind.

Thanks for pointing out,
cheers,
sasha

I’ve logged
Issue #7

Cheers,

Charles.

I want to +1 this. The most frustrating time we’ve had with vaadin is fixing style issues. our H and VLayouts we need to have padding in them but vaadin’s height and width calculations is not taking padding into account.