Search code examples
javascripthtmldom-eventscss-position

onclick event include the remaining space

In the following HTML code, when I click on text a message is shown. I need that onclick event include the white space on the right of text too.

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>


<span class="list-group-item" type="button">
    <span class="label label-primary label-as-badge">3</span>
    <span class="label label-default label-as-badge">1</span>
    <span class="label label-success label-as-badge">0</span> 
    <span onclick="alert('you click me')">my text</span>  
</span>

Update

Since my words are ambiguous to some people, I show it by an image. The blue oval shows region of onclick operation. And the red oval shows the range that I want to expand this event. If user click in the red oval, this event must be activated.

enter image description here

Solution

  • You will need to use a table like layout using display:table & display:table-cell on the elements and give the element 'width:100%' you want to take up the remaining space in the row

    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>


<span style="display:table;width:100%;" class="list-group-item" type="button">
    <span style="display:table-cell;" class="label label-primary label-as-badge">3</span>
    <span style="display:table-cell;" class="label label-default label-as-badge">1</span>
    <span style="display:table-cell;" class="label label-success label-as-badge">0</span> 
    <span style="display:table-cell;width:100%;background-color:#ccc;" onclick="alert('you click me')">my text</span>  
</span>