Button in list component

Remo

I’ve got a list where I’d like to add an action. Code is below. It works, but the button isn’t aligned very well. The text is outside the list and the icon too close to the bottom. Is this something which just isn’t supported? Shall I use my own list class for something like this?

<div class="list striped">
    <div class="item" v-for="user in users">
        <div class="item-content has-secondary">
            {{user.name}}
        </div>
        <div class="item-secondary">
            <quasar-drawer-link icon="edit" to="/test" exact>Edit</quasar-drawer-link>
        </div>
    </div>
</div>

I also tried to use a simple button, but that’s also not very well aligned.

rstoenescu

<quasar-drawer-link> is already a list item. What you are trying to do won’t work because you’re using an item as a secondary for another item. Always look at the markup if things seem not to work correctly.

Try some other way.

Remo

Thanks, but I’m still not having much luck with the list component.

I’m fine creating my own list, don’t waste time on this if you disagree, but I thought I’d still mention my thoughts.

The item-secondary has a fixed height and an inconsistent margin due to the fixed height of the row class item. While this might be okay if I have some text or an icon, it doesn’t work well if I want to put anything with a different height like a button.

I feel like we should remove the fixed height or make sure that other components work too in a list.

list-group-item in bootstrap also doesn’t have a fixed height and works better for me.
We could also adjust the alignment for individual components like ionic does. This demo for example http://ionicframework.com/docs/components/#item-buttons they set specific rules for buttons in a list using .ionic .item-button-right > .button

0_1478957787115_upload-0f68ffc5-92cc-44e3-83e3-7a4e696ae314

rstoenescu

Lists are not for everything. Secondary can only be icon or text.
If you want something fancier, simply create your own using Grid CSS: http://quasar-framework.org/api/css-grid-layout.html

Some unpolished example:

<div class="row items-center">
  <div class="auto">admin</div>
  <button class="primary">Edit</button>
</div>

No More Posting New Topics!

Button in list component