Multiline Button ?

Vaadin 6 / 7 / 8 Framework UI
1

Hi great Vaadiners !

First of all, sorry for my English…Perhaps u’ll need some imagination to understand my message…

In fact I just want to know how (if it’s possible) to have a multiline Button ?
I already try to set width, or to add “
”, but no…only one line…

If someone knows how to do, dont hesitate ! :o)

PS: long life to Vaadin !

2

Hi,

If you’re using the Reindeer theme (default), then it’s only possible to do multiline buttons using the NativeButton component. Regular Button component theme does not scale vertically, hence only one line is supported.

The Runo theme supports multiple line buttons also with the regular Button component.

In either case, you need a custom theme and a custom stylename for the button (e.g. Button.addStyleName(“multiline”)) and then override a couple of properties with CSS:

.v-button-multiline .v-button-caption {
   white-space: normal;
}

That should get you started.

3

It works like a charm.
Thx u !!! :love:

4

Hi,

I’m trying to create a multiline button but so far I cannot make it work, or at least in a browser different from IE8 and in eclipse.

What I did so far:

1º created a custom theme and applied to my application

 @import url(../runo/styles.css);
 
.v-button-multiline .v-button-caption {
      white-space: normal;
}
 
 .v-nativebutton-multiline .v-nativebutton-caption {
      white-space: normal;
}

2º Created buttons and nativebuttons

nativeButton_1.setCaption(“hi \n there”);
nativeButton_1.setStyleName(“multiline”);

3º for line break I’ve tried \n, \r, \r\n,

It works on eclipse and IE, but on Chrome, Firefox and Safari it doesn’t.
What am I doing wrong??

Tanks in advance.

5

Ok, I solved this by changing the “white-space: normal” tag to “white-space: pre”. Now when it finds \n it will break the text.
Hope it help someone

6

Yes, I tried your solution (white-space: pre), it works. Thanks much. 1 more comment - if using white-space: normal, it will make the button caption - “Submit Request” break in two lines which is not expected sometimes. So, “white-space:pre” at this point is better solution.

7

I have a VerticalLayout. On this VerticalLayout I put multiline BORDERLESS buttons with styling

.v-button-multiline .v-button-caption {
   white-space: normal;
}​

final Button button = new Button("buttonTitle");
button.addStyleName(ValoTheme.BUTTON_BORDERLESS);
button.addStyleName("multiline");
verticalLayout.addComponent(button);

but the problem is that the first button “overgrow” second button. Do you have any idea what am I doing wrong? Is there any other way in Vaadin7, Valo there to make multiline BORDERLESS button?

PS: I can do it with NativeButton, but I want to have BORDERLESS button what is NativeButton not.
PS: on the attached picture, there should be two buttons 1. “National Geographic nenan nenne n” and 2. “World Book Kids”.

Thanks in advance.
17743.png