CSS List problem after upgrade to 0.12



  • 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>


  • Admin

    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>
    


  • 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.
    0_1483577911890_Captura de tela de 2017-01-04 22-35-46.png
    0_1483577942501_Captura de tela de 2017-01-04 22-36-54.png

    <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.


  • Admin

    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


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.