scalawagd
Rookie

change the formatting style of a single value in a dropdown menu

Jump to solution

I have a client who would like to change the text formatting of one option in a dropdown menu.  Anyone have ideas about how to best accomplish this?

In this example, he would like the option for "*add a new vendor" to be bold and possibly a different color.

addANewVendor.png

Any assistance or direction is much appreciated.

Thanks!

Brian

Reply
7 Replies
vadim_tabakman
Nintex Employee
Nintex Employee

Re: change the formatting style of a single value in a dropdown menu

Jump to solution

Hi Brian,

I'm really curious if this is possible.  So hopefully someone can come up with a cool solution.

I've tried a few things and haven't been able to do it.

Vadim

0 Kudos
Reply
vadim_tabakman
Nintex Employee
Nintex Employee

Re: change the formatting style of a single value in a dropdown menu

Jump to solution

Hi Brian,

I haven't been able to change the font, but I figured out a way to change the background color and font color.

Firstly, I opened the Choice control, expanded the Formatting section and for Control CSS Class, I set it to cssMyOptions.

Close it and open the Form Settings and expand the Custom CSS section.  Add the following:

.cssMyOptions option:first-child {

    background-color: red;

    color: white;

}

This will find the Select (choice) and then the first option and it will change the background color to red and the font color to white.

cheers,

Vadim

Reply
pfudala
Novice

Re: change the formatting style of a single value in a dropdown menu

Jump to solution

In addition, if you have to apply it on another option than the first one, you could use a JavaScript in order to select the <option/> you want to color and add a CSS class on it.

NWF.FormFiller.Event.RegisterAfterReady(function()

{

    NWF$(".cssMyOptions").find("option").each(function()

    {

          if(NWF$(this).text() == "add a new vendor")

          {

              NWF$(this).addClass(".my-option-highlighter");

          }

    });

});

Reply
scalawagd
Rookie

Re: change the formatting style of a single value in a dropdown menu

Jump to solution

Nice... I had previously been trying to do this using a CSS selector for the text value of that option, but I wasn't having any luck with that approach.  I hope to have a few minutes to give this a try today or tomorrow.  Thank you Vadim Tabakman and Pierre Fudala for the replies!

Reply
scalawagd
Rookie

Re: change the formatting style of a single value in a dropdown menu

Jump to solution

Not sure why I was not able to get that to work using first-child.  I put it in there exactly as you had it, but this is lookup control, so maybe that works a little differently than a choice control.  I was able to get it to work using this for my custom CSS:

.cssMyOptions option[title="*add a new vendor"] {

color: red;

}

css1.jpg

EDIT: I forgot to add that this worked with the custom class added to the "CSS class" field in the control settings along with the standard nf classes, but not in the "Control CSS class".

css2.jpg

View solution in original post

Reply
vadim_tabakman
Nintex Employee
Nintex Employee

Re: change the formatting style of a single value in a dropdown menu

Jump to solution

Glad you got it working finally

0 Kudos
Reply
scalawagd
Rookie

Re: change the formatting style of a single value in a dropdown menu

Jump to solution

Yeah, me too... the site owner was really happy about this.  I love seeing how different people approach these things.  Usually there are a few ways to accomplish the goal and I love that we can tap into the expertise of the community for guidance.

Reply