How could I add an ICONE inside a SELECT in HAML

1
Hello, I would like to add icons (from source, such as bootstrap for example) inside a select field in HAML, at first I'm doing so, would that be possible? I thought about using the bootstrap list-dropdown as a palette, but it did not work either ...

- icons = ["icon-world", "icon-star-twohdd-o", "icon-users"] 
    %label.control-label
      = Activity.ht("activity_status_situation")
    %select{style: 'max-width: 300px; min-width: 150px', name: 'icons_milestone'}
      - for icon in icons do
        %option{value: "#{icon}", type: "", selected: ("")}
          %i.#{icon}
    

Thank you in advance!

    
asked by anonymous 27.09.2016 / 14:22

1 answer

1

I solved the problem as follows,

First, I've added the scape markup line,

  $(document).ready(function() {
    $(".js-select-icons").select2({
      minimumResultsForSearch: Infinity,
      escapeMarkup: function(m) { 
         return m; 
      }
    });
  });

Second, instead of closing with '<' and open with '>' in select, was opened with the HTML tag as follows:

   %select.js-select-icons{style: 'min-width: 50px', name: 'icons_milestone'}
  - for icon in icons do
     %option{value: "#{icon}", type: "", selected: ("")}
       = "&lt;i class='#{icon}'>&lt;/i>".html_safe

In this way, it worked perfectly! And it was as follows,

I hope it helps and it was clear ...

    
27.09.2016 / 16:01