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

Popular posts from this blog

python - TypeError: start must be a integer -

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

django - Creating multiple model instances in DRF3 -