ui-iconpicker icon indicating copy to clipboard operation
ui-iconpicker copied to clipboard

Dropdown not working when using the picker with bootstrap ui

Open pihomeserver opened this issue 10 years ago • 3 comments

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 avatar Jan 05 '15 19:01 pihomeserver

Hello Just add dropdown in the span tag

Le 16 janv. 2015 à 08:43, Daniel Rasinski [email protected] 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

pihomeserver avatar Jan 16 '15 08:01 pihomeserver

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>");

risfeng avatar May 05 '16 02:05 risfeng

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");

tekbuds-manisha avatar Jan 13 '17 08:01 tekbuds-manisha