Geek Answers Handbook

Click button or glyphicon in a group list item

I'm currently trying to insert a glyphicon or button in a list-group item. I want that when the user clicks anywhere on the list item, they are associated with a specific page, but when they click a glyphicon or button, they link to another page. Why am I trying to do this, it places a glyphicon or button outside the list-group field. Why is this? How can i fix this?

Great importance.

the code:

<div class="list-group">
            <a href="my_django_url" class="list-group-item">
                            <a href="another_django_url"><span class="glyphicon some-glyphicon"></span></a>
            </a>

+4
source share
3 answers

here you go:

<div class="list-group">
    <li class="list-group-item">
        <a href="my_django_url">
           first link
        </a>
        <a href="another_django_url" class="icon">
            <span class="glyphicon glyphicon glyphicon-search"></span>
        </a>
    </li>
</div>

.icon {
    float: right;
}

script: http://jsfiddle.net/9r14uuLw/

+6
source

Sorry for brevity (at work / slammed shut):

, ...

<div class="list-group-item row" ng-repeat="item in list.items">
    <a class="col-xs-6 col-sm-8 col-md-10 col-lg-10 pull-left" href="#/lists/{{list.id}}/items/{{item.id}}"><h5>{{item.name}} ({{item.quantity}})</h5></a>
    <h5 class="col-xs-6 col-sm-4 col-md-2 col-lg-2 pull-right">
        <a class="pull-left" href="#/lists/{{list.id}}/items/{{item.id}}/edit" ng-show="list.name !== 'all-deleted-items'"><u>Edit</u></a>
        <a class="pull-right" href="" ng-click="removeItem(item, $event)" ng-show="list.name !== 'all-deleted-items'"><u>Remove Item</u></a>
    </h5>
</div>

- /! <h5> . row, div.list-group-item, ().

#caveat:

, .

, !

+3

, , -- , . <a> <a>, , , , .

<div class="list-group-item" style="padding: 0;">
    <a href="#" style="display: block; padding: 10px 15px;">test</a>
    <a href="#" class="btn btn-sm btn-danger" style="position: absolute; top: 50%; right: 15px; margin-top: -15px;">hi</a>
</div>

This should be close to what you need. I just added some built-in styles to quickly show you how to do this, but you probably want to come up with a few more common styles to make it easy to reuse.

+1
source

More articles:


All Articles