<q-separator /> break render with no errors

ItaiLewin

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>

Max

~~did you add the component to your quasar config?~~

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

rstoenescu

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.

ItaiLewin

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.

rstoenescu

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