CSS List problem after upgrade to 0.12

[jclemgruber]

I have an issue using CSS Lists where doesn’t show scrollbar anymore. This problem shows up after upgrade 0.9 -> 0.12. Does anyone have some tips? Thank you.

<code>
<div class=“layout-padding”>
<div class=“list” v-for=“item in items”>
<div class=“item multiple-lines”>
<div class=“item-content has-secondary”>
</code>

[rstoenescu]

Hi,

Your HTML syntax is not valid.

1. Don’t apply v-for on div class="list". This will make multiple lists.
2. Inside a main div class="list" apply v-for on div class="item".
3. Watch for opening and closing each HTML tag.

So a valid syntax is:

<div class=“list”>
   <div class=“item multiple-lines” v-for=“item in items”>
      <!-- item HTML tags: item-content, primary etc -->
   </div>
</div>

[jclemgruber]

Hi @rstoenescu ,

Sorry, i didn’t sent my entire html and thanks, i’ve get multiple lists instead of multiple items. But, even changed that, i still can’t scroll my results on large screens. I can scroll successfully when using mobile-view on Chrome or Quasar Play. Like i’ve said, on 0.9 this such of thing didn’t happen.

<template>
<div class=“layout-padding”>

<h5>Instituições</h5>

<button class="primary big circular absolute-bottom-right push" @click="newInst()" style="right: 15px; bottom: 15px; z-index:2">
  <i>add</i>
</button>

<div class="list">
    <div class="item multiple-lines" v-for="Inst in Instituicoes">
        <div class="item-content has-secondary">
            <div>{{Inst.nome}}</div>
            <div class="item-label item-smaller">{{Inst.email}}</div>
        </div>
        <div class="item-secondary">
            <i slot="target">more_vert
                <q-popover ref="popover">
                    <div class="list">
                        <div class="item item-link" @click="editInst(Inst.id)">
                            <div class="item-content">Editar</div>
                        </div>
                     </div>
                </q-popover>
            </i>
        </div>
    </div>
</div>

</div>
</template>

Any ideas?

Thank you.

[rstoenescu]

Due to the way Vue Router works, the following markup is needed (notice the wrapper <div> right below <template>):

<template>
  <!-- root node required -->
  <div>
    <!-- your content -->
    <div class="layout-padding">
      <!-- if you want automatic padding -->
    </div>
  </div>
</template>

Check https://github.com/quasarframework/app-template-default/blob/master/template/templates/view.vue