CustomLayout + Css

Flow
1

I have problem with CustomLayout + css. the problem is only one first div is shown, and other is missing.

ini simple html css is easy to create 2 colum div with 1 top header. but when implement using vaadin, is missing 2 div tag.
is my approach is is wrong, or any thing that i was incorrect ?

please help, here is the code

templatewelcome.html

in java I set :

CustomLayout layout = new CustomLayout(“templatewelcome”);
layout.PrimaryStyleName(“main”);

in style.css
.main .div {
margin: 0px;
padding: 0px;
border: 0px;
}

.main.div#top {
position: absolute;
top: 0px;
left: 0px;
height: 50px
}

.main div#left {
float: left;
width: 300px;
height: 400px;
}

.main div#right {
float: left;
background-color: #32cd32;
}

2

Hi Negah,

I think that you should change your last style from this:

.main div#right { float: left; background-color: #32cd32; } to this:

.main div#right {
  float: right;
  background-color: #32cd32;
}

I think that your last div is just on the top of your second one.

HTH,

Javi

3

Hi Jave,

thanks for your reply,
I had changed as your suggestion, is still not working.
the div is only shown for top only, if I reorder with with right on first line, only right is shown, other is invisible.
I don’t know if my approach is wrong, or should i use CSSLayout instead.

if the css + html is running without vaading, column is working for most browser, but on vaadin only one Div is shown.

any one able give me suggestion ?

4

Hi,

I can spot a few mistakes in your CSS, which would make it not work as expected.

.main .div { margin: 0px; padding: 0px; border: 0px; } This part doesn’t really affect anything, since you’re not specifying an element with the class “div” in your custom layout. If you wish to target all the 3 divs inside the custom layout, then the selector needs to be “.main div” (without the dot before “div”). But still it wouldn’t make much difference, since regular div’s don’t have margin, padding or border by default.

.main.div#top { position: absolute; top: 0px; left: 0px; height: 50px } Here the selector is also a bit wrong. You have a dot instead of a space after the “.main”. So the selector should be “.main #top”, no need to over-specify it with the type selector “div”.

On another note, you shouldn’t use ID’s in your custom layout templates, if you ever intend to use the same layout twice on the same page. Also, they don’t really add anything relevant to the template semantics, so you could just switch them to class attributes instead.

The “#top” div is position:absolute, but are you specifying the “.main” element to be position:relative (or something else to make it a new positioning context). Or do you wish for the “top” element to be positioned relatively to something else?

Hope this helps!

5

Thanks you very much Jouni for your guidance,
but I had follow as your suggestion but the result still similar. only the first div is shown, two other div is not visible.

here are my change :

.main#top {
position: relative;
top: 0px;
left: 0px;
height: 50px
}

.main#left {
float: left;
width: 300px;
}

.main#right {
float: right;
background-color: #32cd32;
}

I had also changed the id become class :

please pointer where is my mistake ?

regards

6

You removed the whitespace between the selectors, and also switched the div id’s to classes, but left the selectors to use id selectors. Try this CSS, with the exact HTML you posted:

.main .top {
position: relative;
top: 0px;
left: 0px;
height: 50px
}

.main .left {
float: left;
width: 300px;
}

.main .right {
float: right;
background-color: #32cd32;
}