Label and its icon on same line

Vaadin 6 / 7 / 8 Framework UI
1

Is there a way to have the icon for a Label be shown on the same line?

I tried some CSS, but it didn’t get me there, and this CSS already hurts my brain :wink:

I have a Label set like:

myLabel.setValue( “New object” );
myLabel.setIcon(new ThemeResource(“icons/fatcow16/new.png”);
myLabel.addStyleName(“newObject”);

What I found is that I end up with a DOM something like:

New object

So, I tried the following CSS so that the DIV following my icon is set ‘inline’ and remove the ‘float:left’. Then, when that second DIV contains a DIV with my label, it’s also inline. Firebug seems to show I have the styles where I thought I’d need them, but still the label falls below the icon.

div.v-caption-newObject + div { display: inline; float: none !important; }
div.v-caption-newObject + div>div.v-label-newObject { display: inline; }

Is there an easier way, perhaps? Or a few more tweaks to the CSS?

Thanks for any ideas!

2

Answered it myself looking at the Sampler for Label of course!

Since my label was plain text, I could just use myLabel.setCaption() instead of myLabel.setValue() (leaving the value unset/null) it will appear as I’d like, next to the icon.

3

With the remark that there will be additional empty space left below the label due to the space reserved for the blank value. This may or may not mess up your appearance arrangements. I’m using a HorizontalLayout for now to avoid writing custom CSS (a la Vaadin).

4

Found a solution here: https://vaadin.com/wiki/-/wiki/Main/Using+font+icons that applies to font icons:

label.setContentMode(ContentMode.HTML);
label.setValue(“Press “ + FontAwesome.BOOKMARK.getHtml() + “ to bookmark”)
5

Any updates on a normal (non hacky) solution for this?
Doing html in Java is not why most of us use Vaadin.