how to space between components

Question

the issue is very easy, but seems quite complicate;I've search on internet and try a lot but there is not way to find a solution for me!! All I need is not having space between an icon and a text:

this is the code:

Label subTitle = new Label("nel cammin di nostra vita mi trovai in selva oscura");
Label stpIMG = null;
        
stpIMG = new Label();
stpIMG.setContentMode(ContentMode.HTML);
stpIMG.setValue("<img src=\"VAADIN/themes/valo/images/sprite_svg_all.svg#ristampa\">");
stpIMG.setWidth("30px");
stpIMG.setHeight("20px");

HorizontalLayout subTitleLayout=null;
        
subTitleLayout = new HorizontalLayout(stpIMG,subTitle);
subTitleLayout.setExpandRatio(stpIMG, 1);
subTitleLayout.setExpandRatio(subTitle, 2);
    
subTitleLayout.setWidth("650px");
subTitleLayout.setSpacing(false);

mainLayout.addComponents(subTitleLayout);

And is not easy to accomplish even if is so easy; What I'm wrong? thanks so much

score 2 · Answer 1 · answered Nov 09 '22 at 20:53

2

The problem is subTitleLayout.setExpandRatio(stpIMG, 1);

setExpandRatio is telling the layout to expand the slot containing stpIMG.

answered Nov 09 '22 at 20:53

Rolf

2,178
4
18
29

but if I comment both line of setExpandRadio the result is that the text will be on the icon ; in other word you cannot see the n – fraaanz Nov 09 '22 at 21:14
I'm guessing that's because the image is actually larger than the 30px width you're giving to stpIMG. Any particular reason you're using a Label for the image instead of an Image component? – Rolf Nov 09 '22 at 21:19
because I haven't find how to set an image to a label on the same line; if I use subTitle.SetIcon it appears on two line; – fraaanz Nov 09 '22 at 21:54
The same way you're placing two Labels on the same line? In a HorizontalLayout that lays things out horizontally, i.e. in a line? – Rolf Nov 10 '22 at 07:01
thanks a lot for your replay. I'm not able to undersand how to eliminate space between them, I've tried with setExpandRatio but I cannot dispose as I wish; I'm going to get crazy for that :) – fraaanz Nov 10 '22 at 07:43

score 0 · Answer 2 · answered Nov 29 '22 at 16:37

I've solved the issue in this way:

public static HorizontalLayout BuildIconStampa(String... text) {

Label warnIMG = new Label();
warnIMG.setContentMode(ContentMode.HTML);


warnIMG.setValue("<img src=\"VAADIN/themes/valo/images/sprite_all2.svg#ristampa\">");
warnIMG.setWidth("30px");
warnIMG.setHeight("30px");


Label[] labels = new Label[text.length];
for (int i = 0; i < text.length; i++) {
    Label body = new Label(text[i]);
    body.setSizeFull();
    body.setStyleName("bsr-gray");
    labels[i] = body;
}

VerticalLayout vl = new VerticalLayout(labels);
HorizontalLayout result = new HorizontalLayout(warnIMG, vl);
result.setSpacing(true);
result.setExpandRatio(vl, 1);
return result;

}

how to space between components

2 Answers2