CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
Devsined
Devsined

Reputation: 3531

Make UI Bootstrap accordion heading fully clickable area

I have a UI Bootstrap accordion whose heading I want to be fully clickable, not just the title like 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 workaround for this?

Upvotes: 3

Views: 976

Answers (1)

TomSlick
TomSlick

Reputation: 735

The issue is that the anchor that's handling the toggle is wrapped around the header text rather than the div. I would style the content of the heading with negative margins and matching positive paddings corresponding to the padding values of the heading panel in order to expand the clickable area beyond the div.

So say for instance the padding on your panel-heading is 9px 15px, you'd have the following css in your panel-heading-blue class

.panel-heading-blue{
    margin: -9px -15px; 
    padding: 9px 15px;
}

Upvotes: 2

Related Questions