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:

[code]
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);
[/code]----------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);
}

24209.png

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.