Search code examples
htmlcsshyperlinkmarkup

How to increase clickable area on div button surrounded by an ahref

When I click the sides of this div button, the ahref won't activate, not until you actually click on the 'bounding box' for the string AA.

enter image description here

Mark up

<a href="#/tags?ticker={{ticker.ticker}}">
    <div class="ticker">{{ticker.ticker}}</div>
</a>

CSS

.ticker {
    float: left;
    overflow: hidden;
    position: relative;
    margin: 0 10px 10px 0;
    padding: 5px 8px;
    width: auto;
    cursor: pointer !important;
    clear: both;
    @include rounded(4px);
}

It will work if I use a regular AngularJS ng-click, however this doesn't need to be a Javascript solution:

<div class="ticker" ng-click="tkrs.gotoTicker(ticker.ticker)">
    {{ticker.ticker}}
</div>
Solution

  • The answer was a simple attribute: display: inline-block; added to .ticker

    This question below is slightly different from mine, however the same solution works: How can I make a link inside a div fill the entire space inside the div?