cancel
Showing results for 
Search instead for 
Did you mean: 
themos
Nintex Newbie

Button with multi-line text

Jump to solution

Hey guys,

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

So far I tried:

  • Pressing Enter
  • Using \r\n
  • Using Common:Newline

But nothing seems to work!

Any ideas?

Labels: (2)
0 Kudos
Reply
9 Replies
philipplucas
Nintex Newbie

Re: Button with multi-line text

Jump to solution

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

Reply
themos
Nintex Newbie

Re: Button with multi-line text

Jump to solution

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?

0 Kudos
Reply
themos
Nintex Newbie

Re: Button with multi-line text

Jump to solution

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

0 Kudos
Reply
philipplucas
Nintex Newbie

Re: Button with multi-line text

Jump to solution

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

0 Kudos
Reply
themos
Nintex Newbie

Re: Button with multi-line text

Jump to solution

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

0 Kudos
Reply
philipplucas
Nintex Newbie

Re: Button with multi-line text

Jump to solution

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.

0 Kudos
Reply
Highlighted
themos
Nintex Newbie

Re: Button with multi-line text

Jump to solution

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

0 Kudos
Reply
philipplucas
Nintex Newbie

Re: Button with multi-line text

Jump to solution

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

0 Kudos
Reply
themos
Nintex Newbie

Re: Button with multi-line text

Jump to solution

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!

Reply