Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
HorizontalLayout height problem
Hi!
I need a HorizontalLayout whose height should be just 18px. I tried to set it by doing
HorizontalLayout hly = new HorizontalLayout();
hly.setHeight("18px");
hly.addStyleName("bluebackground");
This is setting the height to 24px, and the background is applying only upto 18px and the remaining 4px is shown blank.
i also tried by adding css styles. it is not working.
Thankyou!
Mahmood.
Are you sure your content fits into that 18pixels? Or maybe there are spacings/margins form another layout?
Yes, the content fits with in 18pixels space. There is no spacings/margins. i even tested by emptying the HorizontalLayout.
for example:
HorizontalLayout hly1 = new HorizontalLayout();
hly1.setHeight("18px");
hly1.setWidth("500px");
hly1.addStyleName("bluebackground");
HorizontalLayout hly2 = new HorizontalLayout();
hly2.setHeight("18px");
hly2.setWidth("500px");
hly2.addStyleName("bluebackground");
HorizontalLayout hly3 = new HorizontalLayout();
hly3.setHeight("18px");
hly3.setWidth("500px");
hly3.addStyleName("bluebackground");
VerticalLayout vly = new VerticalLayout();
vly.addComponent(hly1);
vly.addComponent(hly2);
vly.addComponent(hly3);
----------css-------------
.mytheme .bluebackground {
background: #0000ff;
margin: 0px 0px 0px 0px;
}
still the same behaviour.
Hey Mahmood,
What version of Vaadin are you using, and with what theme? I just created a fresh Vaadin project, added your code above to default UI class, and it looks fine.
@Override
protected void init(VaadinRequest request) {
final HorizontalLayout layout = new HorizontalLayout();
layout.setMargin(true);
setContent(layout);
HorizontalLayout hly1 = new HorizontalLayout();
hly1.setHeight("18px");
hly1.setWidth("500px");
hly1.addStyleName("bluebackground");
HorizontalLayout hly2 = new HorizontalLayout();
hly2.setHeight("18px");
hly2.setWidth("500px");
hly2.addStyleName("bluebackground");
HorizontalLayout hly3 = new HorizontalLayout();
hly3.setHeight("18px");
hly3.setWidth("500px");
hly3.addStyleName("bluebackground");
VerticalLayout vly = new VerticalLayout();
vly.addComponent(hly1);
vly.addComponent(hly2);
vly.addComponent(hly3);
layout.addComponents(vly);
}
Joacim Päivärinne: Hey Mahmood,
What version of Vaadin are you using, and with what theme? I just created a fresh Vaadin project, added your code above to default UI class, and it looks fine.
Hi Joacim Päivärinne
I'm using vaadin 7.6.4 version with valo theme.
Even though you have not set any spacing for the verticalLayout in the code, we can see spacing in between the components in the screenshot.That is the issue i'm facing. Can we remove it? Is it possible?
Thank You!
Mahmood.
Hey Mahmood,
Yes, absolutely. The "spacing" comes from the v-slot's line-height. You can set the v-slot's line-height to 1, or change the horizontal layouts to block elements.