Height of option with empty value

How Do I...
#1

Is there a way to set the same height as the options with text for the ones where the value is empty?

I have a select2 where the options are dynamically set using ajax and text files, but one of the options’ value is empty (I need it to be empty). Its height is smaller than the options where the values contain text.

Example

#2

You need to arrange for the rendered “empty” item to have some invisible content. You can do that with a custom templateResult function like the following:

const renderItem = item => item.text || '\u200B';
// ... Initialize the select2
$('#my_select').select2({
   // configuration options
   renderTemplate: renderItem,
   // more configuration options
});

This outputs the item’s text if it’s not the empty string; otherwise it outputs \u200B, the Unicode zero-width space character. You could alternatively output the regular non-breaking space, e.g.,  , or any other “invisible” character (but not the regular space: HTML rendering will treat that like no content at all).

Of course your rendering function could return a more elaborate DOM fragment (if you need special styling, for instance), but If you just need basic rendering (which your screen shot implies) you can even inline the rendering function directly in the Select2 configuration object:

$('#my_select').select2({
   // configuration options
   renderTemplate: item => item.text || '\u200B',
   // more configuration options
});
#3

I tried like you told me but isn’t working (also tried the &nbsp).

Code

$.fn.select2.defaults.set( "theme", "bootstrap" );
$.fn.select2.defaults.set("selectOnClose", true);

$.ajax('./new_sources/list_types.txt',{
    dataType: 'text',
    success: function (text) {
        var data = text.split("\n").map(function (item) {
            var typeIdName = item.split(':');
            return {'id': typeIdName[0], 'text': typeIdName[1]};
        });
        console.log(data);
        $("#type_list").select2({
            renderTemplate: item => item.text || '\u200B',
            'data': data,                
            placeholder: "Selectionnez un type",
            placeholderOption: "first"
        });
    }
});
#4

It worked for me, but I wasn’t using an AJAX data source. But I was using a Javascript object array, which seems to be what you’re doing.

Is the “empty” item part of the data that is returned from your AJAX query? If not, where does the empty item come from?

Also, can you put some sample code on JSFiddle or Codepen? It would help me troubleshoot the issue if I could see your actual implementation.

#5

I found a workaround that works, not sure if it’s the simplest way but this will do for now

$.ajax('./new_sources/list_types.txt',{
    dataType: 'text',
    success: function (text) {
        var data = text.split("\n").map(function (item) {
          var typeIdName = item.split(':');
          //console.log(typeIdName[0]+":"+typeIdName[1]);
          if(!$.trim(typeIdName[1])){               
              return {'id': typeIdName[0], 'text': "Sans Type"};
            }else{
              return {'id': typeIdName[0], 'text': typeIdName[1]};                                   
          }                
        });
        console.log(data);
        $("#type_list").select2({                
            'data': data,                
            placeholder: "Selectionnez un type",
            placeholderOption: "first"
        });
    }
});
#6

Maybe not the best solution, but I did it with CSS

.select2-results__option:empty {
    height: 40px;
}