How to: Change the display of input controls (even multiline TextBox) to look like a label (CSS)

Strange requirement, I would agree, but when working with Nintex forms, you may have some input fields that were then required to be disabled, and then the client did not like the way they were displayed. Do you go in and change all your textboxes to labels?

In Infopath, you could indeed just right click the textbox and select to have it changed to a label control. And, it worked.

No such thing in Nintex. So, instead of changing all the controls, with the danger of the client coming back and saying that they want them to be input fields again, you can change the display of input fields to look like labels.

The following CSS class will do just that.

.labelfied{
border-style: none !important;
background-color: transparent !important;
color:#212121!important;
overflow-y:hidden;
}

However, note that the above will only disable the vertical scrollbars in multiline textbox fields.

If you need to disable both the vertical and the horizontal scrollbars, you will need to replace the “overflow-y: hidden;” with “overflow: hidden;”

Likewise, “overflow-x: hidden;” disables horizontal scrolling.

The line that sets the colour is not required. It’s just there to allow you to set the text colour to whatever colour your normal text is displayed in. The reason being that disabled controls are displayed in light gray. You will have to reset that colour to make it match to your standard text colour.

Reference one was used.

MGR: the Intelogist

About MGR: the Intelogist

SharePoint Server developer, turned Sitefinity developer, turned Angular developer, turned SharePoint Online consultant, turned Unily consultant, turned O365 consultant... Never a dull moment!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

This site uses Akismet to reduce spam. Learn how your comment data is processed.