Add CSS class to cascading dropdown field container through JS

Forums Cascading dropdowns Add CSS class to cascading dropdown field container through JS

This topic contains 5 replies, has 2 voices, and was last updated by  Alexander Bautz 1 week ago.

  • Author
    Posts
  • #22971

    DHO
    Participant

    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 ?

  • #22975

    Alexander Bautz
    Keymaster

    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

  • #22998

    Alexander Bautz
    Keymaster

    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

  • #23003

    DHO
    Participant

    Thank you Alexander, that solved the problem

  • #23011

    DHO
    Participant

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

  • #23042

    Alexander Bautz
    Keymaster

    Like this:

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

    Alexander

You must be logged in to reply to this topic.