Make UI Bootstrap accordion heading fully clickable area
I have a UI bootstrap accordion whose title I want to be fully clickable, not just the title as the 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 some kind of workaround for this?
source to share
The problem is that the anchor handling the radio button is wrapped around the title text, not div
. I would flatten the header content with negative margins and match positive paddings to match the header padding values panel
to expand the clickable area beyond div
.
So say for example padding on your panel-heading
equals 9px 15px
, you will have the following css in the classpanel-heading-blue
.panel-heading-blue{
margin: -9px -15px;
padding: 9px 15px;
}
source to share