angularjs - Make UI Bootstrap accordion heading fully clickable area -
i have ui bootstrap accordion heading want clickable, not title default behavior.
<accordion class="fda-accordion panel-group panel-group-square" close-others="oneatatime"> <accordion-group is-open="fdaclass1open" ng-show="fdarecallsclass1count"> <accordion-heading> <div class="panel-heading-blue"> <i class="fa fa-plus fa-fw" ng-class="{'fa-minus': fdaclass1open, 'fa-plus': !fdaclass1open}" style="margin-right:10px"></i> fda class 1 recalls ({{fdarecallsclass1count}}) </div> </accordion-heading> {{fdarecallsclass1content}} </accordion-group> </accordion>
is there workaround this?
the issue anchor that's handling toggle wrapped around header text rather div
. style content of heading negative margins , matching positive paddings corresponding padding values of heading panel
in order expand clickable area beyond div
.
so instance padding on panel-heading
9px 15px
, you'd have following css in panel-heading-blue
class
.panel-heading-blue{ margin: -9px -15px; padding: 9px 15px; }
Comments
Post a Comment