Add CSS class to cascading dropdown field container through JS

[DHO]

I am trying to add a css class to the cascading dropdown field container through custom JS.

Following what is done:

spjs.casc.init(
 {
 "manualMode":true,
 "dataSource":"",
 "lookupList":"SLA Mgmt",
 "lookupListBaseUrl":"{currentSite}",
 "lookupListFields":["Category/Title","Sub_x0020_Category/Title"],
 "thisListFields":["CategoryText","SubCategoryText"],
 "dropDownDefaultvalue":"Select...",
 "filter":"",
 "hideEmptyDropdowns":false,
 "autoselectSingleOption":true,
 "clearInvalidSelection":false,
 "addOwnValue":false,
 "addOwnValueMouseover":"",
 "cancelOwnValueMouseover":"",
 "sideBySide":false,
 "debug":false
 }
);

 var fld;
    arrFields = ['Title', 'Requester', 'Case_x0020_Type', 'Product','CategoryText','SubCategoryText', 'Case_x0020_Category', 'Sub_x0020_Category', 'Description', 'Issue_x0020_Status', 'Assigned_x0020_To','Comments','Resolution','Approval_x0020_Submit'];
    
    jQuery.each(arrFields, function (i, fin) {
        
        fld = jQuery(fields[fin]);
        
        switch (fld.attr('FieldType')) {
            case 'SPFieldText':
                var fldId = '#dffs_' + fin;
                console.log(fldId);
                console.log(jQuery(fldId).html());
                if(fld.has('select'))
                {
                    
                    fld.addClass('select is-small is-danger');
                    fld.find('select').css({'width':'100%'});
                }
                else {
                    fld = jQuery(fields[fin]).find('input');
                    fld.addClass('input');
                }
                
                if(fld.hasClass('required'));
                    fld.addClass('is-danger');
                break;
.....

The problem is that at this stage the cascading dropdown have not been initiated and the select element could not be found.

could anyone help? Is there any better method to add CSS Class ?

[Alexander Bautz]

I’m not sure exactly what you are looking to style, but I think you will be better off using Custom CSS. Add something like this to style the td of the fields named Level1, Level2 and Level3

#dffs_Level1 td, #dffs_Level2 td, #dffs_Level3 td{
    border-top:2px green dashed;
}

Alexander

[Alexander Bautz]

To use your existing CSS classes you can change your function like this to apply different styles to the fields containing selects and those containing inputs:

var arrOfSelectFields = ["SelectField1","SelectField2"];
var arrOfTextFields = ["InputField1","InputField2"];
    
jQuery.each(arrOfSelectFields, function (i, fin) {
    jQuery("#dffs_" + fin).addClass("select is-small is-danger");
});

jQuery.each(arrOfTextFields, function (i, fin) {
    jQuery("#dffs_" + fin).addClass("input");
});

To set the 100% width of the selects you must (if you don’t add it to your external CSS file) add this to your Custom CSS:

.select select{
    width:100%;
}

Alexander

[DHO]

Thank you Alexander, that solved the problem

[DHO]

How can I add a CSS class to the Save and Close buttons

[Alexander Bautz]

Like this:

jQuery(".ms-ButtonHeightWidth").addClass("the_classname");

Alexander

[Author]

Posts