CODEWITHSUNDEEP
cssvaadin
mahmood sk
mahmood sk

Reputation: 77

how to underline a letter of button caption in vaadin?

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!!!

Upvotes: 1

Views: 935

Answers (3)

Akash Thakare
Akash Thakare

Reputation: 23002

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);

Upvotes: 2

OscarBcn
OscarBcn

Reputation: 626

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.

Upvotes: 1

Ieuan Stanley
Ieuan Stanley

Reputation: 1258

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.

Upvotes: 0

Related Questions