how to underline a letter of button caption in vaadin?

Question

I'm using keyboard shortcuts in my Vaadin application. So i want to highlight one letter in button caption. The underline might be for first or second or third letter of the caption.

I am able to underline the first letter by using the "first-letter" property of CSS. How to underline second or third letter?

NativeButton btn = new NativeButton("Edit");
btn.addStyleName("myunderline");

.mytheme .myunderline.v-nativebutton::first-letter {
     text-decoration: underline;
}

Is there any solution?

Thankyou!!!

score 2 · Accepted Answer · answered May 12 '16 at 05:08

So I want to highlight one letter in button caption...

You have not specified the vaadin version you are using. But latest vaadin 7 (> 7.4) versions support HTML in Button caption.

NativeButton nb = new NativeButton("<u>E</u>dit");
nb.setCaptionAsHtml(true);

score 1 · Answer 2 · answered May 11 '16 at 12:22

Is posible to indicate it using & symbol during shortcut listener creation.

According Vaadin docs: https://vaadin.com/docs/-/part/framework/advanced/advanced-shortcuts.html

// A field with Alt+A bound to it, using shorthand notation
TextField address = new TextField("Address (Alt+A)");
address.addShortcutListener(
        new AbstractField.FocusShortcut(address,  "&Address"));

Hope it helps.

score 0 · Answer 3 · edited May 23 '17 at 12:13

Looks like there's no simple CSS solution, based on This Answer where someone is trying to do the same, and This Answer from the Vaadin forums.

Basically, your simplest option is to wrap the letter you want to underline in its own element which applies the underline:

<button ...>Te<span class=underline>x</span>t</button>

... Or something along those lines. The first link above has an answer which references a number of other JS libraries (lettering.js, nth-everything-css) which might be able to help you out.

how to underline a letter of button caption in vaadin?

3 Answers3