Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    <q-separator /> break render with no errors

    Help
    3
    5
    554
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • I
      ItaiLewin last edited by

      I am testing the list components
      https://v1.quasar-framework.org/vue-components/list-and-list-items#Example--Left-avatar%2Fthumbnai-QItemSection
      and found that the <q-separator /> break the list.
      all items after this tag are not show.
      0_1551446214655_a1b35fd3-6fdf-487e-9b0c-923fed3623eb-image.png
      the result:
      0_1551446289167_9c9dd935-057e-470d-b9ce-46196059126b-image.png
      but if I comment it out, it is visible:
      0_1551446374958_77e91753-1070-4662-91fa-d66aa12cf50a-image.png

      0_1551446425464_4dbfe78f-1b01-419a-bd0d-dc7a45ff7c4a-image.png
      and when looking in chrome dev tool, I can see the items are not created after the <q-separator /> tag.
      this is my code:

      <!DOCTYPE html>
      <html lang="en-us">
      
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">
      
        <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"
          type="text/css">
        <!-- <link href="https://cdn.jsdelivr.net/npm/animate.css@^3.5.2/animate.min.css" rel="stylesheet"> -->
        <link rel="icon" href="favicon.png" type="image/x-icon">
      
        <!-- Quasar:  Add ".rtl" for the RTL support (example: quasar.rtl.min.css).  -->
        <link href="https://cdn.jsdelivr.net/npm/quasar@1.0.0-beta.5/dist/quasar.min.css" rel="stylesheet" type="text/css">
        <!-- Do you need MDI? -->
        <link href="https://cdn.jsdelivr.net/npm/@mdi/font@^3.0.0/css/materialdesignicons.min.css" rel="stylesheet">
      
      
        <title>Miklahat Users list</title>
      
        <style type="text/css">
          .logo-container {
            width: 255px;
            height: 242px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
          }
      
          .logo {
            position: absolute;
          }
        </style>
      </head>
      
      <body>
        <div id="q-app" dir=rtl>
          <div class="q-pa-md">
            <q-layout view="lHh lpr lFf" container style="height: 800px" class="shadow-2 rounded-borders">
              <q-header elevated>
                <q-toolbar>
                  <q-avatar>
                    <img src="https://cdn.quasar-framework.org/img/quasar-logo.png">
                  </q-avatar>
      
                  <q-toolbar-title>
                    List with q-separator issue
                  </q-toolbar-title>
      
                  <q-btn flat round dense icon="whatshot"></q-btn>
                </q-toolbar>
              </q-header>
      
              <q-page-container>
                <q-page padding>
      
                  <div class="q-pa-md" style="max-width: 350px">
                    <q-list bordered>
      
                      <q-item clickable v-ripple>
                        <q-item-section avatar>
                          <q-avatar>
                            <img src="https://cdn.quasar-framework.org/img/boy-avatar.png">
                          </q-avatar>
                        </q-item-section>
                        <q-item-section>Image avatar</q-item-section>
                      </q-item>
      
        <!-- this tag has issues: -->
                      <q-separator />
      
      
                      <q-item clickable v-ripple>
                        <q-item-section avatar>
                          <q-icon color="primary" name="bluetooth" />
                        </q-item-section>
      
                        <q-item-section>Icon as avatar</q-item-section>
                      </q-item>
      
                    </q-list>
      
                  </div>
                </q-page>
              </q-page-container>
            </q-layout>
          </div>
        </div>
      
      
        <!-- Firebase App is always required and must be first -->
        <script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-app.js"></script>
      
        <!-- Add additional services that you want to use -->
        <!-- <script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-auth.js"></script> -->
        <script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-database.js"></script>
      
        <!-- You need Vue too -->
        <script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.min.js"></script>
      
        <!-- VueFire -->
        <script src="https://unpkg.com/vuefire/dist/vuefire.js"></script>
      
        <!-- Quasar  -->
        <script src="https://cdn.jsdelivr.net/npm/quasar@1.0.0-beta.5/dist/quasar.umd.min.js"></script>
      
        </head>
      
        <script>
      
          Vue.component('my-page', {
            template: '#my-page'
          })
      
          new Vue({
            el: '#q-app',
            data: function () {
              return {
                version: Quasar.version,
                drawerState: true
              }
            },
            methods: {
              launch: function (url) {
                Quasar.utils.openURL(url)
              }
            }
          })
        </script>
      </body>
      
      </html>
      1 Reply Last reply Reply Quote 0
      • M
        Max last edited by Max

        did you add the component to your quasar config?

        ah sry you are using the umd version. any console errors?

        1 Reply Last reply Reply Quote 0
        • rstoenescu
          rstoenescu Admin last edited by

          Do NOT use self-closing tags (as mentioned repeatedly on docs) when on UMD version. This is because your browser interprets the tags before Vue can kick in and do its job. It does not know <q-separator> and so it gets confused on the self closing tag. Basically what the browser understands is that everything after <q-separator> is a child of it.

          1 Reply Last reply Reply Quote 1
          • I
            ItaiLewin last edited by

            Yes, thank’s
            I just figured it out after few hours investigating weird UI issues…
            that what happend when copy/past from the doc exemples.

            1 Reply Last reply Reply Quote 0
            • rstoenescu
              rstoenescu Admin last edited by

              @ItaiLewin hit the Codepen button on any example and copy paste from there. The code will already be UMD compatbile (self-closing tags converted to normal tags).

              1 Reply Last reply Reply Quote 0
              • First post
                Last post