framework7

Open full view…

Why aren't these columns automatically aligning?

davidjoseph
Thu, 18 May 2017 06:05:56 GMT

I'm trying to place an <f7-card> component (using Vue) inside of the content of an accordion list item. For some reason, the automatic alignment is messed up. Here's how I'm defining the card: <f7-list-item accordion-item v-for="(subval, subkey) in val" :title="subkey" :key="subkey" class="items" @click="showit"> <f7-accordion-content> <f7-card style="background: rgb(160, 160, 160); color: white;"> <f7-card-header> <f7-grid> <f7-col>One</f7-col> <f7-col>Two</f7-col> <f7-col>Three</f7-col> <f7-col>Four</f7-col> </f7-grid> </f7-card-header> <f7-card-content> <f7-list style="background: white; color: black"> <f7-list-item v-for="(optionval, optionkey) in subval" > <f7-grid> <f7-col>One</f7-col> <f7-col>Two</f7-col> <f7-col>Three</f7-col> <f7-col>Fojr</f7-col> </f7-grid> </f7-list-item> </f7-list> </f7-card-content> </f7-card> </f7-accordion-content> </f7-list-item> And here's the result: How can I align these items? [Screen Shot 2017-05-18 at 07](//muut.com/u/framework7/s1/:framework7:Dsyx:screenshot20170518at07.56.04.png.jpg)