CODEWITHSUNDEEP
javascriptjqueryhtml
Sneha Patel
Sneha Patel

Reputation: 49

how to reduced padding for `li` in `select2` using jQuery?

I have used select2 library and trying to change li padding using jquery. Example:

$('#selectField').on('select2:open', function (e) { $('ul.select2-results__options li').css('padding',  '4px');
});

but above code is not working.

Upvotes: 1

Views: 536

Answers (2)

Tanmay
Tanmay

Reputation: 1165

Try it using CSS

 ul.select2-results__options li {
       padding :4px
    }

for specific Dropdown, in your case #selectField

#select2-selectField-results li {
           padding :4px
        }

Upvotes: 1

Vivek
Vivek

Reputation: 2755

Try the following code.

$('#selectField').on('select2:open', function (e) {
  $('ul.select2-results__options > li').css('padding',  '4px');
});

I have added a > in the CSS selector since the li elements are child elements of the ul.select2-results__options.

If you prefer plain CSS, use the CSS below instead of the jQuery above.

ul.select2-results__options > li {
  padding: 4px;
}

Upvotes: 0

Related Questions