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

CSS to format the background of a multi line text box and a people picker

I have recently been asked to style some required fields in a form with some custom css on a nintex form.  Essentially we want for any field that we mark as required the actual text field (not the area around it) will be highlighted with a certain color.  I've been able to do this for all of the controls with the exception of multiline text box. Any guidance would be greatly appreciated.

0 Kudos
Reply
5 Replies
Highlighted
Not applicable

Re: CSS to format the background of a multi line text box and a people picker

Hi. Exactly which part is causing you the problem?

Just using Firebug to apply a css rule manually I can see that-

.ms-spellcheck-true.nf-richtext.nf-richtextV3.nf-associated-control {
background-color: yellow;
}
sets the text field background colour in one of my forms. However be aware that there are two types of rich text column(limited and full) and I believe they are rendered using different HTML elements in the forms screens.
You may be having problems with getting the Nintex Form to emit the field ID into a variable? This function is broken in a significant number of the Nintex Forms controls, and I think from memory multi-line Rich Text is one of them. If so, the easiest workaround is to assign a unique CSS class tot he control in the editor, and use the class to target the control rather than the ID.
0 Kudos
Reply
Highlighted
Nintex Newbie

Re: CSS to format the background of a multi line text box and a people picker

Good morning,

The exact part that's causing the issue is which element I should be targeting with my css.  I have tried to create a unique css class to set the background that doesn't seem to work.  It works fine for the area around the control but because I'm wanting to format the text entry portion it doesn't seem to like what I've done.  This is the css I have used for the single line and the choice fields. I've tried using the textarea element and that only seems to impact the people picker.

.requiredText input[type=text] {  color: #2F5597 !important; background-color:#FFFFCD !important;}

.requiredSelect select {  color: #2F5597 !important; background-color:#FFFFCD !important;}

Thanks again for looking at this with me

0 Kudos
Reply
Highlighted
Not applicable

Re: CSS to format the background of a multi line text box and a people picker

I made a test list with 3 multiline columns, one each of plain text, rich test, and "enhanced" rich text (HTML).

Firstly, as I said, Nintex renders the differnt multiline text field types in two different ways. The two simpler fields are shown on the form in textarea elements. The enhanced rich text field is a <div> with various attributes, including a role="textbox" entry, but there's a wrinkle, (see below).

So, Ignoring the required field part of your requirement, which hopefully should be fairly easy to add, if I run up my default Nintex form on this list with the following custom CSS-

textarea {

background-color: yellow;

}

div[role="textbox"] {

background-color: orange;

}

This seems to work.

The "wrinkle" is that I originally tried adding the styles through JQuery in the custom script area, and the Enhanced Rich Text field (the div) wasn't being styled.

My guess is that maybe the role="textbox" attribute isn't being added until AFTER the form is rendered and tweaked by Nintex's own Javascript. If that's the case, that would make those ERT firlds rather difficult to work with in JQuery, one might have to use a setTimer() delay to start working with them some time after the form has initially rendered.

0 Kudos
Reply
Not applicable

Re: CSS to format the background of a multi line text box and a people picker

The other thing to be aware of is that the different browsers have varying limitations when it comes to styling form elements. I'm using Firefox 38.0 for my testing, it's possible IE in particular will behave differently.

Unfortunately until Nintex come up with a consistent browser-independent API for their form field controls, one is left poking around in the raw HTML dealing with the various inconsistencies yourself.

0 Kudos
Reply
Highlighted
Nintex Newbie

Re: CSS to format the background of a multi line text box and a people picker

Thank you so much, you made my morning.  That's exactly what I needed.  Thanks again

0 Kudos
Reply