Multiline Vaadin Button Caption (no NativeButton usable)

Flow
1

I am using Vaadin and I want to add a caption to a button that has multiple lines - it should simply display String - 2 linebreaks - String which I did not expect to be too hard to do.

Now sadly this turns out to be a little bit harder than I expected - My DataStructure should display a timetable (so I am using a structure that extends a grid) and I want all Slots to be filled with the according lectures and lectureres. However I am bound to use the Button-Element (not the NativeButton - the existing data structure needs a Button to work, I’d like to avoid writing it completely new), so using a HTML-Caption does not work.

So what I tried was a css-class like this:

.multiline-button {
	width: 125px;
	white-space: normal !important;
	height: auto;
	word-break: break-word !important;
	word-wrap: break-word !important;
	background-color: red !important;
}

(actually the background-color was just for testing if the style was applied) - I also tried setting these attributes manually in code via button.setStyle(name, value);. Sadly none of those turns out to even be applied to the button. My Button Creation Code:

@CssImport("./styles/multiline-button.css")
public class NewScheduleTimetable<T> extends TimetableWithValue<T> {

	@Override
	protected Button createSlot(int day, int timeSlot) {
		final Button slotButton = new Button();
	   /* even desperately tried removing all other themes, didn't even change anything 
		slotButton.getThemeNames().forEach(theme -> {
			slotButton.removeThemeName(theme);
		}); */
		slotButton.setWidthFull();
		slotButton.setHeight("125px");
		slotButton.addClassName("multiline-button");

		//this sets the text
		if (hasValue(day, timeSlot)) {
			slotButton.setText(getText(getValue(day, timeSlot)));
		}
		this.recalculateColumnWidths();
		return slotButton;
	}

}

Now the Buttons get created successfully and also display the name they should have - they are just missing the linebreaks for the captions. If I inspect the element in my browser, the captions do contain linebreaks (linebreaks are done via \n).

So I am quite new to Vaadin, but usually these things are a five-minuter and not take me days to figure out different approaches (which all did not work out sadly) - what am I missing here?

2

Hi!

As all Vaadin components utilize shadow DOM, global CSS is not able to affect them most of the time. You can only apply global styles on the component’s host element (the main/outmost element).

You can target the internals of components using the @CssImport annotation, by providing the themeFor attribute with the components tag name as the value.

@CssImport(value = "./styles/multiline-button.css", themeFor = "vaadin-button")

Then, you need to adjust the CSS a bit, to get it applied properly:

:host(.multiline-button) {
	width: 125px;
	height: auto;
	background-color: red !important;
}

:host(.multiline-button) [part="label"]
 {
	white-space: normal;
	word-break: break-word;
	word-wrap: break-word;
}

Learn more about [styling components in the documentation]
(https://vaadin.com/docs/v14/themes/styling-components.html).

3

Thank you a lot for that hint! I will also have a look at that link you provided, thanks for that :slight_smile:

The linebreak works like a charm, do you know why manual linebreaks (“\n”) do not work in the Button-Label? (Buttons are integrated into a Grid (as mentioned above), might be related to that, since I also had problems with linebreaks when using Labels instead of Buttons).

Anyways, thanks for the fast answer.

Edit: Finally figured it out - if anyone reads this and is interested - it looks like you need white-space: pre-line instead of white-space: normal property for Chrome to recognize automatic linebreak and manual linebreak :slight_smile: