Question

How to Add CSS Class to Select Field?

Forms

Updated September 21, 2020

asked on March 20, 2015 • Show version history

I am trying to add a class to a Select field in a form, but when I add a class using the Forms interface, it is actually adding the class to the <li> that contains the Select field. How do I add a CSS class directly to the Select field?

0 0

Answer

SELECTED ANSWER

replied on March 20, 2015

Ah, I had no idea this great library existed.

If you were getting an unexpected result like:

Then it's due to not having the CSS required for chosen.

Add the Chosen.CSS and it should work out just fine. Here's a link to Kelsey's Frost post on adding external CSS files.

For example, here's my full code for a test:

$(document).ready(function(){
  
  $('head').append('<link rel="stylesheet" href="http://FormsServer/Forms/js/libs/chosen_c/chosen.css" type="text/css"/>');
  
  $.getScript("http://FormsServer/Forms/js/libs/chosen_c/chosen.jquery.js", function () {
             
  $("select").chosen()
              });
  

  
  
});

Resulting in the desired behavior.

Pretty sweet. Was worried it'd conflict with existing forms classes and scripts but appears to work pretty nice. Great idea.

Cheers,

Carl

1 0

Replies

replied on March 20, 2015

OK. I was able to apply the class to the Select field itself using the following jQuery:

$('.chosen-select-li select').addClass('chosen-select');

I am still having issues with my main goal though. I am trying to apply the following jQuery plugin to a Laserfiche form: http://harvesthq.github.io/chosen/. I have added the js file to our ./Forms/js folder and referenced it in the JavaScript section of the form we are working on using the following:

$.getScript(http://formsserver/Forms/js/chosen.jquery.js');

I can see in the source code that the js file is being referenced and that the class 'chosen-select' is being applied to the Select field correctly, but the Chosen plugin does not seem to be behaving as expected. If anyone has any advice on what might be wrong, I would appreciate it.

1 0

SELECTED ANSWER

replied on March 20, 2015

Ah, I had no idea this great library existed.

If you were getting an unexpected result like:

Then it's due to not having the CSS required for chosen.

Add the Chosen.CSS and it should work out just fine. Here's a link to Kelsey's Frost post on adding external CSS files.

For example, here's my full code for a test:

$(document).ready(function(){
  
  $('head').append('<link rel="stylesheet" href="http://FormsServer/Forms/js/libs/chosen_c/chosen.css" type="text/css"/>');
  
  $.getScript("http://FormsServer/Forms/js/libs/chosen_c/chosen.jquery.js", function () {
             
  $("select").chosen()
              });
  

  
  
});

Resulting in the desired behavior.

Pretty sweet. Was worried it'd conflict with existing forms classes and scripts but appears to work pretty nice. Great idea.

Cheers,

Carl

1 0

replied on March 20, 2015

Carl... THANK YOU!!! I knew I was missing something. Greatly appreciated!

0 0

replied on March 20, 2015

Have to use jQuery :/

$("#Field11 select").addClass("classToADD");

Cheers,

Carl

0 0

replied on March 20, 2015

Thanks Carl. I got that one figured out, now just need to figure out the rest.

0 0

replied on June 26, 2015

I used the below code.

$(document).ready(function(){

$('head').append('<link rel="stylesheet" href="http://lf01/Forms/js/libs/chosen_c/chosen.css" type="text/css"/>');

$.getScript("http://lf01/Forms/js/libs/chosen_c/chosen.jquery.js" , function () {

$("select").chosen()
});

});

This changes my drop down box as I want however the drop down box is using a Field Rule to populate from a database and none of my database options are available only options that are explicitly entered in the drop down.

0 0

replied on June 27, 2015

I'm assuming you are using the latest version of the chosen script? I just downloaded it and am seeing the same behavior. In the previous version of chosen a database lookup worked as expected. Something must have been changed that has altered the behavior.

0 0

replied on June 29, 2015

Thanks Blake if need be I will see if I can download the older version. However upon further research it looks like this does not work on IOS which is the platform I have a concern on. I have over 5000 entries to filter. Any experience or feedback on using this with IOS?

0 0

replied on June 13, 2016

Did you make it work?

I am looking to do a similar case but with a db lookup list.

The list created from the db is too long and would like to do a search or live search from that list ( single selection value).

I try to play with chosen and cannot make it work, seems it does not work at all with the db lookup

0 0

replied on September 28, 2018

Looping back around to this (it's only been 2 years). I am still seeing the same problem with it not populating correctly when using a lookup rule on the field. Does anyone know how to get it to work? On the webpage for the plugin (https://harvesthq.github.io/chosen/ ) it mentions an option for "Updating Chosen Dynamically". I am guessing that will fix the issue we are seeing, but I'm not sure how to get it working with the code that @████████supplied previously.

0 0

View 5 previous replies

replied on October 2, 2018

Ah, got this to work, I still had this example on a dev server so here's the changes.

$(document).ready(function(){
  
  $('head').append('<link rel="stylesheet" href="http://FormsServer/Forms/js/libs/chosen_c/chosen.css" type="text/css"/>');
  
  $.getScript("http://FormsServer/Forms/js/libs/chosen_c/chosen.jquery.js", function () {

  $("select").chosen()
              });
 
  
});
// New Changes to make sure it's updated after a lookup rule completes
$(document).ajaxComplete(function () {
   $("select").trigger("chosen:updated");
});

The reason this works is lookup rules use ajax queries to do their work. Whenever an ajax query completes, it triggers an ajaxComplete event which we're now updating ALL select fields on the page to ensure chosen library is still applying.

If you don't want to update all select fields, change the selection target at $("select").

Cheers,

Carl

1 0

replied on October 2, 2018

Thank you Carl!

0 0

replied on October 2, 2018

Carl,

I have another challenge for you. I need to be able to use this in a table with 3 select fields in 3 columns. Also need it to work so when you add a row it works for the new rows. Are you up for the challenge?

0 0

replied on October 2, 2018



$(document).ready(function(){
  
  $('head').append('<link rel="stylesheet" href="http://FormsServer/Forms/js/libs/chosen_c/chosen.css" type="text/css"/>');
  
  $.getScript("http://FormsServer/Forms/js/libs/chosen_c/chosen.jquery.js", function () {


  $("select").chosen()
              });
 // This next line binds the chosen stuff to the "add" new row button and grabs all drop downs on the page
  $(".cf-table-add-row").click(function() { $("select").chosen();$("select").trigger("chosen:updated") });
});

$(document).ajaxComplete(function () {
   $("select").trigger("chosen:updated");
});

With the new line added, it worked for me

then clicking the add button yields

2 0

replied on May 30, 2019

Any idea how to also make it work if the new rows are added from a database lookup?

1 0

replied on June 11, 2019

@████████ Add to the ajaxComplete event to include making the newly added in select fields to be applied.

$(document).ready(function(){
  
  $('head').append('<link rel="stylesheet" href="http://FormsServer/Forms/js/libs/chosen_c/chosen.css" type="text/css"/>');
  
  $.getScript("http://FormsServer/Forms/js/libs/chosen_c/chosen.jquery.js", function () {


  $("select").chosen()
              });
 
  $(".cf-table-add-row").click(function() { $("select").chosen();$("select").trigger("chosen:updated") });
});

$(document).ajaxComplete(function () {
   $("select").chosen();  /**-- New Line addded 6/11/19 to apply chosen to DB populated rows
   $("select").trigger("chosen:updated");
});

1 0

replied on November 18, 2019

One more request on this. Apparently this does not work with Field Rules that initially hide the fields being used with chosen. When the field finally shows it is just a normal drop-down field. Any idea how to tell it to run when it is shown?

0 0

replied on September 21, 2020

Has anyone tried the above code with Forms 10.4.5? The Chosen jquery applies to the field, but if the field is setup to perform a lookup and populate other fields, the lookups do not work. Was wondering if anyone has come across the issue and found a fix?

1 0

You are not allowed to follow up in this post.

Question

Question

How to Add CSS Class to Select Field?

Answer

Replies

Sign in to reply to this post.