Button with multi-line text

  • 25 July 2016
  • 9 replies
  • 72 views

Badge +6

Hey guys,

Just wondering, is it possible to have a submit button with multi-line text?

So far I tried:

  • Pressing Enter
  • Using
  • Using Common:Newline

But nothing seems to work!

Any ideas?


9 replies

Badge +11

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

Badge +6

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?

Badge +6

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

Badge +11

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

Badge +6

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

187045_pastedImage_0.png

Maybe it's a bug??

Badge +11

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.

Badge +6

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 happy.png

Badge +11

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 wink.png

Regards

Philipp

Badge +6

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:

187065_pastedImage_0.png

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

Reply