Get started
Loading...
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.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Where to include a web components css file when integrating a third party w by Martin Vyšný, 1 week ago
Recent Posts
Vaadin Forum1. Vaadin Flow - Java

HorizontalLayout height problem

Mahmood shaik
6 years ago Feb 03, 2016 11:22am

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.
 

Matti Tahvonen
6 years ago Feb 03, 2016 4:09pm

Are you sure your content fits into that 18pixels? Or maybe there are spacings/margins form another layout?

Mahmood shaik
6 years ago Feb 04, 2016 6:23am

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.

Joacim Päivärinne
6 years ago Mar 22, 2016 3:00pm

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);
}
Mahmood shaik
5 years ago Apr 20, 2016 4:47am

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.

Joacim Päivärinne
5 years ago Apr 22, 2016 12:36pm

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.