Select2 Multiple Select - Unable to change font-size of options

JavaScript
1

I’m using Select2 (4.0.8) plugin on one of multiple-select dropdown queries. A function has been added which plugins in a checkbox like feature to the Select2 multiple-select.

jQuery(function($) {
	$.fn.select2.amd.require([
    'select2/selection/single',
    'select2/selection/placeholder',
    'select2/selection/allowClear',
    'select2/dropdown',
    'select2/dropdown/search',
    'select2/dropdown/attachBody',
    'select2/utils'
  ], function (SingleSelection, Placeholder, AllowClear, Dropdown, DropdownSearch, AttachBody, Utils) {

	var SelectionAdapter = Utils.Decorate(
      SingleSelection,
      Placeholder
    );
    
    SelectionAdapter = Utils.Decorate(
      SelectionAdapter,
      AllowClear
    );
          
    var DropdownAdapter = Utils.Decorate(
      Utils.Decorate(
        Dropdown,
        DropdownSearch
      ),
      AttachBody
    );
    
	var RowSelected = $('#Question1')
    $(RowSelected).select2({
      width: 'auto',
      placeholder: 'Select multiple items',
      selectionAdapter: SelectionAdapter,
      dropdownAdapter: DropdownAdapter,
      allowClear: true,
      templateResult: function (data) {

        if (!data.id) { return data.text; }

        var $res = $('<div></div>');

        $res.text(data.text);
        $res.addClass('wrap');

        return $res;
      },
      templateSelection: function (data) {
      	if (!data.id) { return data.text; }
        var RowselectedNumber = ($(RowSelected).val() || []).length;
        var RowSelectedElements = $(RowSelected).val();
        var total = $('option', $(RowSelected)).length;
        return RowselectedNumber + " of " + total;
      }
});

To this I’m trying to add the below piece of code which should reduce the fontsize of the options.

$('#Question1').on('select2:open', function (e) {
        $('body').find('ul.select2-results__options').addClass('myFont2');
        $('body').find('li.select2-results__option').addClass('myFont2');
    });

where myFont2 { font-size:80%; }

However this is not working and the font size is not reducing. Can someone help me with where I’m going wrong?

Find full code below:

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
    <script src='https://kit.fontawesome.com/a076d05399.js'></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/brands.css" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/fontawesome.css" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/regular.css" crossorigin="anonymous">
</head>
<style>
    .myFont2 {
        font-size:80%;
    }
    .select2-results__option .wrap:before{
    font-family:fontAwesome;
    color:#999;
    content:"\f096";
    width:25px;
    height:25px;
    padding-right: 10px;
    }
    .select2-results__option[aria-selected=true] .wrap:before{
    content:"\f14a";
    }
</style>
<body>
    <div style="padding-bottom:2px">
        Question1
        <select id="Question1">
            <option></option>
            <option id="Delhi" value="Delhi">DelhiDelhiDelhiDelhi</option>
            <option id="Mumbai" value="Mumbai">MumbaiMumbaiMumbaiMumbai</option>
            <option id="Kolkata" value="Kolkata">KolkataKolkataKolkataKolkata</option>
            <option id="Bengaluru" value="Bengaluru">BengaluruBengaluruBengaluruBengaluru</option>
        </select>
    </div>
</body>
<script>
jQuery(function($) {
	$.fn.select2.amd.require([
    'select2/selection/single',
    'select2/selection/placeholder',
    'select2/selection/allowClear',
    'select2/dropdown',
    'select2/dropdown/search',
    'select2/dropdown/attachBody',
    'select2/utils'
  ], function (SingleSelection, Placeholder, AllowClear, Dropdown, DropdownSearch, AttachBody, Utils) {

	var SelectionAdapter = Utils.Decorate(
      SingleSelection,
      Placeholder
    );
    
    SelectionAdapter = Utils.Decorate(
      SelectionAdapter,
      AllowClear
    );
          
    var DropdownAdapter = Utils.Decorate(
      Utils.Decorate(
        Dropdown,
        DropdownSearch
      ),
      AttachBody
    );
    
	var RowSelected = $('#Question1')
    $(RowSelected).select2({
      width: 'auto',
      placeholder: 'Select multiple items',
      selectionAdapter: SelectionAdapter,
      dropdownAdapter: DropdownAdapter,
      allowClear: true,
      templateResult: function (data) {

        if (!data.id) { return data.text; }

        var $res = $('<div></div>');

        $res.text(data.text);
        $res.addClass('wrap');

        return $res;
      },
      templateSelection: function (data) {
      	if (!data.id) { return data.text; }
        var RowselectedNumber = ($(RowSelected).val() || []).length;
        var RowSelectedElements = $(RowSelected).val();
        var total = $('option', $(RowSelected)).length;
        return RowselectedNumber + " of " + total;
      }
    
    });
  
  });
  
});

$('#Question1').on('select2:open', function (e) {
        $('body').find('ul.select2-results__options').addClass('myFont2');
        $('body').find('li.select2-results__option').addClass('myFont2');
    });
</script>
</html>
2

It looks as if the select2:open event is not triggering when you open the select.

So, how about a different approach? You are wanting to do the following with the options:

$('#Question1').on('select2:opening', function (e) {
    $('body').find('ul.select2-results__options').addClass('myFont2');
    $('body').find('li.select2-results__option').addClass('myFont2');
});

Instead of doing that manually via JavaScript, we can replace the myFont2 selector with a different CSS one that does it automatically for you instead.

    ul.select2-results__options,
    ul.select2-results__option {
        font-size:80%;
    }

That now works.

The myFont2 selector can now be removed:

    /* myFont2 {
        font-size:80%;
    } */

And the JS code can be removed too.

// $('#Question1').on('select2:opening', function (e) {
//     $('body').find('ul.select2-results__options').addClass('myFont2');
//     $('body').find('li.select2-results__option').addClass('myFont2');
// });

And it all still works.

1 Like
3

Hi @Paul_Wilkins ! This would work, but I have multiple select2 dropdowns on my actual page. I need to target some specific select dropdown, so would require to identify it with it’s ID. I tried

#Question1 ul.select2-results__options{
font-size:80%;
}

but this doesn’t work. Any ideas how to make this work? Thanks a lot, again!! :slightly_smiling_face:

4

Hi @Paul_Wilkins . Thanks, I figured it out with your help!! An “#id.classname” combination works to help get the relevant select.

#select2-Question1-results.select2-results__options{
font-size:80%;
}

Thanks again for your help, this issue has been bugging me from a long time and you have been a “life-saver”. :smiley:

2 Likes
5

Not a problem - I’m glad to have once again found a good solution by removing JavaScript :slight_smile:

2 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.