Button with multi-line text

Hi Themos,

you can achieve this by using CSS white-space property.

1. Go to the "Formatting" tab of your buttons control settings.
2. Give your button some css class
3. Go to your Form Settings and add this code to the custom CSS section (replace "myButtonClass" with the class you assigned your button):

.myButtonClass{

     white-space: normal !important;

}

The result should look like this:

Regards

Philipp

Hey Philip,

Thanks for the quick reply!

What if I don't want the text to wrap, but want to force it to use multiple lines regardless of the button's size?

Btw also tried adding <br />, still no luck!

You can insert a button via JQuery:

NWF$('.someClass').before('<button>This is a<br>Test Button</button>');

When you do it like this, the line break will be displayed on your button. But you would then need to bind your save and submit function on this button. See this thread on further instructions for custom submit buttons: Nintex forms custom button submit AND redirect

There might be an easier way to achieve this but this is what i got running quite easily.

Regards

Philipp

Why use complex manual solutions though, especially if you have a number of form rules attached to the button?

Should it be so hard to render the button's label as 2 lines (especially using the New line Common constant)??

Maybe it's a bug??

I don't know how the button you place on your form is rendered internally and why it's removing the line breaks. It could be a bug though. You can open a support ticket to be sure.

However, it's usual to have the need to apply additional JS/JQuery/CSS to finalize your form. Normally it doesn't matter if a button label will be displayed on one or two lines. If you have these kind of specific requirements, you need to customize your form.

The good thing about nintex forms is that you can implement this additional logic quite easily. Doing the same on e. g. InfoPath would probably be much more difficult.

To be honest, I've done so many extremely complex javascript/css hacks over the last couple of months to get a Nintex Forms project to work as required, that I'm now trying to find the simplest solutions to everything!

Thanks again for your help, I'll see what I'll do with the button label

Most of the time the simplest solution is the best anyway, especially regarding maintenance and reliability.

Please keep us informed if you have any progress on the button label, other customers may request the same

Regards

Philipp

I had some free time so I played around with CSS, this is what I came up with:

.multilineButton {

    white-space: pre-line; <-- really important

    word-spacing: 200px; <-- any large number, really

}

And got this result:

Still don't love it, but it's a pretty good solution for now!