Choice control formatting in Nintex Forms

[glenda]

Hi guys,

I am having a Nintex forms formatting 'issue' and was wondering whether someone already has a workaround. Very simple actually, it's about how Nintex Forms formats a choice control in case the text is too long to go on one line. Example of what it does and what I would like it to do:

Any awesome ideas?

I am using Nintex Forms 2013 On Prem, most recent release (2.5.0.0).

Glenda

[andrewg · Accepted solution]

I found if you change the CSS class of

.nf-filler-control-inner label

and set display: inherit;

that it will put the text alongside the checkbox/radio button. Because it is set to inline-block it forces it to it's own line.

You could just put in your own class instead so that you do not accidentally overwrite other labels.

[bburke]

Andrew,

Works great for the list form.

When I display using the Nintex Form Web Part, text is still misaligned.

Any thoughts?

[andrewg]

That's interesting that it would be different. I wonder if the CSS class inheritance is changed when in the web part. Maybe trying to force an inline-block would help and not use inheritiance

[cmykkid]

I'm using Nintex Forms 2.9.0.0 and can't get this to work. I emailed Nintex support and they said it's because this thread is based on 2.5.

Anybody out there get this working on 2.9? Thanks in advance.

Gary

[andrewg]

Then the css classes have changed since. Thanks for the update. But I believe the same effect will work if you can apply an inline-block to the values.

[kmccool]

Hey Andrew, 

I'm trying to follow your instructions, but the "set display: inherit;" portion is grayed out in my form designer. Is this a setting I should have my admin change so I can edit the display format?

Thanks

Kassie

[kmccool]

Never mind, I added the CSS to the form settings and it worked.

thanks

Kassie

[marnita]

We're using Nintex 365, App Version NFO 1.2.3.0. Is there a solution for this question for this app version?

Thanks.

[acz]

Would that be something I just add to a new line 4 in the Custom CSS form setting?

/* Template styles */
.nf-form-input .nf-filler-control-inner, .nf-form-label .nf-filler-control-inner
{
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
}
.nf-form-input .nf-textbox-wrapper
{
left: 0px;
right: 0px;
}
/* Label styling for desktop layout */
.nf-form-label‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍