render select field options with icon

rf1234

https://editor.datatables.net/reference/field/select

I would like to render the label of the built-in select fields to include an icon but it doesn't work.

While I can change button labels to be an fa icon I can't do this with select labels.

Here is my button which shows the link icon neatly.

//custom button to copy a hyperlink of the selected contract to the clipboard
$.fn.dataTable.ext.buttons.clipboard = {
    extend: 'edit',
    text: '',
    className: 'fa fa-link button-fa-icon',
....

This also works fine. Excel Icon instead of text.

"buttons": {
    "excel": '<span class="fa fa-file-excel-o"></span>',
                },

I tried this with a built-in select field:

label: lang === 'de' ? 'Titel (opt.):' : 'Title (if any):',
name:  "user.acad",
type:  "select",
options: [
    { label: '---', value: "" },
    { label: '<span class="fa fa-graduation-cap"></span>Dr.', value: "Dr." },
    { label: 'Prof. Dr.', value: "Prof. Dr." }
]

And this is what it looks like

I am using the same in my self-written HTML and it works like a charm:

<div class="row">                                        
    <select class="selectpicker form-control" id="TitleSelect" name="TitleSelect">                                                    
        <option value = ""> </option>
        <option data-icon="glyphicon glyphicon-education" value = "Dr.">Dr.</option>
        <option data-icon="fa fa-graduation-cap" value = "Prof. Dr.">Prof. Dr.</option>                                              
    </select>
</div>             

kthorngren

I don't believe select options supports HTML tags like span. See the option tag docs and this SO thread. This SO thread shows some options for use FA with the options.

Allan answered a similar question in this thread.

Kevin

rf1234

Yep, "span" doesn't work but "data-icon" works fine with select fields. But I can't add that either when using the built-in select field

rf1234

I found this in the docs and tried it:

So this is the modified code for the select field:

label: lang === 'de' ? 'Titel (opt.):' : 'Title (if any):',
name:  "user.acad",
type:  "select",
options: [
    { label: '---', value: "" },
    { label: 'Dr.', value: "Dr.", attr: { "data-icon": "glyphicon glyphicon-education" } },
    { label: 'Prof. Dr.', value: "Prof. Dr.", attr: { "data-icon": "fa fa-graduation-cap" } }
]

As you can see here the "data-icon" stuff is inserted properly by Editor - just like in my hand-written HTML above! BUT IT STILL DOESN'T WORK. The data-icon attributes are being ignored.

What could be the cause of this?

rf1234

@allan
Would you have an idea? The HTML generated by Editor looks ok, but the data-icon attributes don't work in this case ... (In my hand-written HTML they work fine.)

allan

Hi,

That you've got the correct HTML structure now suggests you are most of the way there. I'm not immediately sure what the missing link will be though - does FontAwesome need a Javascript handle run when new elements with icons are inserted into the document?

Are you able to give me a link to the page that shows the icons working (per your original post) and your Editor page, then I'll be able to see what the difference is and advise from there?

Allan

kthorngren

I would be interested to see how you are using the data-icon attribute to display the font awesome icons on the handwritten select list too. I haven't made this work but I can get it working with an a

You might be able to use this template to build a test case:
https://live.datatables.net/guwafemu/374/edit

Kevin

rf1234

I would be interested to see how you are using the data-icon attribute to display the font awesome icons on the handwritten select list too.

It is just this simple code that makes it work. (It's already posted above with a screenshot of the result, but here it is again):

<div class="row">                                       
    <select class="selectpicker form-control" id="TitleSelect" name="TitleSelect">                                                   
        <option value = ""> </option>
        <option data-icon="glyphicon glyphicon-education" value = "Dr.">Dr.</option>
        <option data-icon="fa fa-graduation-cap" value = "Prof. Dr.">Prof. Dr.</option>                                             
    </select>
</div>          

I will try a couple of other things and then get back to you.

rf1234

Here is the test case that shows exactly the same faulty behavior. "data-icon" is properly inserted into the HTML by Editor but it has no effect.
https://live.datatables.net/metimime/1/edit

Here is a link to the page where it works with my handwritten HTML.
1. Go to: https://www.lgfinance.eu/
2. Select "English" ( unless you know German )
3. Click "Login/Registration"
4. Click on the "Registration" tab
5. Click on the select picker field "Title"

kthorngren

Don't you have to do something like this to get the data-icon attribute to work?

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css");

select {
  font-family: 'FontAwesome';
  content: attr(data-icon);
}

This doesn't work for my for the select options so maybe the selector is wrong. I had to use this for the data-icon attribute to work with an a tag:

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css");

a::before{
  font-family: 'FontAwesome';
  content: attr(data-icon);
}

You can see what I tried here:
https://live.datatables.net/newisago/2/edit

Kevin

rf1234

No, Kevin. I don't have that in my code anywhere. And it worked right away ... I coded this 6 years ago.

rf1234

I added the bootstrap Javascript Libs as well - but it doesn't make a difference as far as I can tell.
https://live.datatables.net/metimime/2/edit

kthorngren

You are using bootstrap-select which refactors the select into something like this:

<div class="btn-group bootstrap-select form-control open">
   <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="button" data-id="TitleSelect" title="Prof. Dr." aria-expanded="true"><span class="filter-option pull-left"><i class="glyphicon fa fa-graduation-cap"></i> Prof. Dr.</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span></button>
   <div class="dropdown-menu open" role="combobox" style="max-height: 483.289px; overflow: hidden; min-height: 0px;">
      <ul class="dropdown-menu inner" role="listbox" aria-expanded="true" style="max-height: 471.289px; overflow-y: auto; min-height: 0px;">
         <li data-original-index="0" class=""><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="text">---</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
         <li data-original-index="1" class=""><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false"><span class="glyphicon glyphicon glyphicon-education"></span> <span class="text">Dr.</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
         <li data-original-index="2" class="selected"><a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="true"><span class="glyphicon fa fa-graduation-cap"></span> <span class="text">Prof. Dr.</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
      </ul>
   </div>
   <select class="selectpicker form-control" id="TitleSelect" name="TitleSelect" tabindex="-98">
      <option value="">---</option>
      <option data-icon="glyphicon glyphicon-education" value="Dr.">Dr.</option>
      <option data-icon="fa fa-graduation-cap" value="Prof. Dr.">Prof. Dr.</option>
   </select>
</div>

But bootstrap-select is not applied to the editor form. I'm not sure the best way to apply it but I tried using $('select').selectpicker(); in open. It mostly works. The list needs to be brought forward as its below the editor form. The Font Awesome icon doesn't show but it also doesn't show with your handwritten select list - I added it to the test case.
https://live.datatables.net/metimime/3/edit

Kevin

allan

Hi Roland,

Thanks for the link. The "Title" field in your registration form uses Bootstrap Select which is why it works there - it isn't a regular select like Editor's select:

I had wondering if it might be possible to use a pseudo element with the option to display text - that would let us put a Font Awesome icon in the list, but alas, no, that is not possible as shown in this trivial test case where I've attempted to put a pseudo element in the option tag.

I'm sure that is specified in HTML somewhere, but I'm not immediately seeing it or on MDN.

I've come a bit closer with this test case which is made possible since Font Awesome's font has characters for the standard ASCII code points, as well as its icons. Using the code point as an entity in the HTML almost allows it to work. The icon is shown in the select and option in Chrome, but only for the select in Firefox. The option shows an "unknown character".

If you want full control over the styling and to show icons / HTML in an options list you more or less need to use an external plug-in, like you have with the Bootstrap Select. Unfortunately, that is one that doesn't have an Editor field type plug-in yet.

Allan

allan

Just found this workaround for Firefox if you wanted to use the entities approach.

Allan

rf1234

Yep, that did the trick. Thanks, Kevin!

The fa icon didn't work in my example either but it worked on my page.

This is the working code now:

{
    label: lang === 'de' ? 'Titel (opt.):' : 'Title (if any):',
    name:  "user.acad",
    type:  "select",
    attr: { name: "titleSelect" },
    options: [
        { label: '---', value: "" },
        { label: 'Dr.', value: "Dr.", attr: { "data-icon": "glyphicon glyphicon-education" } },
        { label: 'Prof. Dr.', value: "Prof. Dr.", attr: { "data-icon": "fa fa-graduation-cap" } }
    ]
}

editor
    .one( 'opened', function (e, mode, action) {
        $('[name="titleSelect"]').selectpicker();
    })

rf1234

Thanks Allan!

I noticed I can't set a class for the select field using "attr". "name" worked but "class" didn't. Is that intentionally so?

Because if I could use a class as well, I could specify the class "selectpicker" and it would work right away without needing the command "one opened".

kthorngren

I was going to suggest using a selector like this to cover the full form:

$('select', '.DTED_Lightbox_Content').selectpicker();

Updated example:
https://live.datatables.net/metimime/3/edit

I noticed I can't set a class for the select field using "attr"

I noticed that too. Not sure why. Lets see what @allan says.

Kevin

allan

Seems to work here: https://live.datatables.net/metimime/6/edit ?

        attr: {
          name: "titleSelect",
          class: 'allan-test',
        },

Allan

rf1234

https://live.datatables.net/metimime/8/edit

Here I am trying to add the class "selectpicker" on initialization. That unfortunately breaks the select field completely. That made me think I can't add a class which is wrong: I can't add the class "selectpicker". That is the issue.

The weird thing is that if you have the class "selectpicker" in handwritten HTML there is no problem. Everything works fine. But if you add it through Editor or using jQuery, the field is broken.

This also breaks the field:

editor
  .one( 'opened', function (e, mode, action) {
        $('[name="titleSelect"]').addClass("selectpicker");
    })

@allan, I guess that is probably nothing that you could fix but rather a selectpicker issue. But I have a work around. Doing the below works fine.

editor
  .one( 'opened', function (e, mode, action) {
        $('[name="titleSelect"]').selectpicker();
    })

kthorngren

I guess I assumed it didn't work since the select input gets messed up and the select, with the class selectpicker is not found as shown in this example:
https://live.datatables.net/metimime/9/edit

But it does work since it seems bootstrap-select is doing something but the select input gets corrupted. Its beyond my level of understanding

Seems like the selectpicker() API works for Roland.

Kevin

rf1234

Fairly easy way to pimp the Editor front end a little, I think.

Done quickly.

{
    label: lang === 'de' ? 'Sprache:' : 'Language:',
    name:  "user.language",
    type:  "select",
    attr: { class: "selectIconsRequired" },
    options: [
        { label: lang === 'de' ? 'Deutsch' : 'German',  value: "de-DE", 
            attr: { "data-icon": "flag-icon flag-icon-de" } },
        { label: lang === 'de' ? 'Englisch' : 'English', value: "en-GB", 
            attr: { "data-icon": "flag-icon flag-icon-us" } },
    ]
},
...
editor
    .one( 'opened', function (e, mode, action) {
        $('.selectIconsRequired').selectpicker();
    })