CODEWITHSUNDEEP
javavaadin
cadmy
cadmy

Reputation: 535

How to output label with icon in line?

Text of the label jumps on a next line when I use setIcon(). How to output it in one line? 

Label info = new Label("Reports are generated every day at 5 pm", ContentMode.HTML);
info.setIcon( new ThemeResource("img/icons/information.png") ) ;
info.setSizeUndefined();
JobsLayout.addComponent( info );
JobsLayout.setComponentAlignment(info, Alignment.MIDDLE_RIGHT);

Upvotes: 4

Views: 6654

Answers (5)

Lakshan Thilakarathne
Lakshan Thilakarathne

Reputation: 55

If it is your label is plain text, We can use use label.setCaption() instead of label.setValue() (leaving the value unset/null) Then caption will appear next to the icon.

But there will be additional empty space left below the label due to the space reserved for the blank value. This may impact the appearance. To avoid that we can use alignments for the whole row by align other elements to top (layout.setComponentAlignment(otherComponent, Alignment.TOP_LEFT);).

Upvotes: 0

spilymp
spilymp

Reputation: 320

I had the same problem and used the following "solution" at the end. The advantage is if you use multiple labels on below each other they have the same space between icon and text.

Vaadin Code

Button label = new Button("Your label text here.");
label.setIcon(FontAwesome.USER);
label.addStyleName(ValoTheme.BUTTON_BORDERLESS + " labelButton");

CSS Code

.labelButton:after, .labelButton:active {
    content: none;
    border: none;
    color: #000000;
}

.labelButton {
    cursor: default;
}

Upvotes: 2

jsosnowski
jsosnowski

Reputation: 1590

You can use icon inside label text:

Label date = new Label(FontAwesome.CALENDAR.getHtml() + " " + new Date());
date.setContentMode(ContentMode.HTML);

Source: Vaadin Wiki.

Result:

Vaadin label with icon in the same line.

Upvotes: 5

Abdullah Amin
Abdullah Amin

Reputation: 36

It might be the label as well, you can try some inline CSS since you have specified your content type to HTML anyway, it should be something like this: Label info = new Label("<span style=\"dispaly: inline;\">Reports are generated every day at 5 pm</span>", ContentMode.HTML);

If that didn't work, try doing the same thing with the div associated with the label - or - you can inject your icon with the inline CSS within the span.

Upvotes: 1

Krayo
Krayo

Reputation: 2510

You should try this:

info.addStyleName("line");

with this CSS:

.v-caption-line {
    display: inline !important;
}

Upvotes: 2

Related Questions