justin-lau / ui-iconpicker

A Bootstrap 3 Icon Picker implemented in AngularJS
http://justin-lau.github.io/ui-iconpicker/
MIT License
32 stars 33 forks source link

Dropdown not working when using the picker with bootstrap ui #3

Open pihomeserver opened 9 years ago

pihomeserver commented 9 years ago

Hello,

The dropdown is not working when including Bootstrap and Angular UI. The directive dropdown has to be added to the span tag in the template generated by iconpicker and it solved the issue

Explanations can be found here : https://github.com/angular-ui/bootstrap/issues/2156

Using Angular 1.2.28, bootstrap 3.2.0 and angular-bootstrap 0.11.2

Regards

pihomeserver commented 9 years ago

Hello Just add dropdown in the span tag

Le 16 janv. 2015 à 08:43, Daniel Rasinski notifications@github.com a écrit :

Can u post ur template?

   $templateCache.put("templates/iconpicker.html",
   "<span class='btn-group ui-iconpicker' ng-class='{ disabled: disabled }'>"+
         "<button type='button' data-toggle='dropdown' class='btn btn-default btn-xs'><i class='{{ iconClass }}'></i><span class='fa fa-caret-down'></span>" +
         "</button>" +
         "<ul c
risfeng commented 8 years ago

Thanks, successful solution. Only need to add data-toggle='dropdown'to button.

return $templateCache.put("templates/iconpicker.html", "<span class=\"btn-group ui-iconpicker\" ng-class=\"{ disabled: disabled }\">\n <button type=\"button\" data-toggle='dropdown' class='btn btn-default btn-xs'><i class=\"{{ iconClass }}\"></i><span class='fa fa-caret-down'></span>\n </button>\n <ul class=\"dropdown-menu\" role=\"menu\">\n <li ng-repeat=\"class in availableIconClasses\">\n <button class=\"btn btn-default\" type=\"button\" ng-click=\"$parent.iconClass = class\"><span class=\"{{ class }}\"></span></button>\n </li>\n </ul>\n <input name=\"{{ name }}\" type=\"hidden\" value=\"{{ iconClass }}\" ng-if=\"name\" />\n</span>");

tekbuds-manisha commented 7 years ago

The above fix works for first click, but fails at times. This is the correct fix (correct usage of uib-dropdown):

$templateCache.put("templates/iconpicker.html", "<span class=\"btn-group ui-iconpicker\" uib-dropdown >\n <button type=\"button\" uib-dropdown-toggle ng-disabled='disabled' class='btn btn-default btn-md'><i class=\"{{ iconClass }}\">\n \n <ul class=\"dropdown-menu\" uib-dropdown-menu role=\"menu\" aria-labelledby=\"single-button\">\n <li ng-repeat=\"class in availableIconClasses\">\n <button class=\"btn btn-default\" type=\"button\" ng-click=\"$parent.iconClass = class\"><span class=\"{{ class }}\">\n \n \n <input name=\"{{ name }}\" type=\"hidden\" value=\"{{ iconClass }}\" ng-if=\"name\" />\n");