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);
}
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?
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.