Q-List border issue



  • Hi
    im trying to make a chat interface using qlist for the chats avaible, but the qlist not always show the left border and i don’t know why

    0_1533832421966_borderIssue.png

    my code looks like this:

       <div class="col-sm-4" style="height:63vh; overflow-y:auto;">
              <q-list highlight link separator style="height: 60vh;">
              <q-item>
              <q-item-side icon="fas fa-user-circle"></q-item-side>
              <q-item-main>Nombre Usuario</q-item-main>
              <q-item-side right stamp="10/12/2018" />
            </q-item>
            <q-item>
              <q-item-side icon="fas fa-user-circle"></q-item-side>
              <q-item-main>Otro Usuario</q-item-main>
            </q-item>
            <q-item>
              <q-item-side icon="fas fa-user-circle"></q-item-side>
              <q-item-main>Nombre Usuario</q-item-main>
            </q-item>
            <q-item>
              <q-item-side icon="fas fa-user-circle"></q-item-side>
              <q-item-main>Otro Usuario</q-item-main>
            </q-item>
            <q-item>
              <q-item-side icon="fas fa-user-circle"></q-item-side>
              <q-item-main>Nombre Usuario</q-item-main>
            </q-item>
            <q-item>
              <q-item-side icon="fas fa-user-circle"></q-item-side>
              <q-item-main>Otro Usuario</q-item-main>
            </q-item>
            <q-item>
              <q-item-side icon="fas fa-user-circle"></q-item-side>
              <q-item-main>Nombre Usuario</q-item-main>
            </q-item>
            <q-item>
              <q-item-side icon="fas fa-user-circle"></q-item-side>
              <q-item-main>Otro Usuario</q-item-main>
            </q-item>
            <q-item>
              <q-item-side icon="fas fa-user-circle"></q-item-side>
              <q-item-main>Nombre Usuario</q-item-main>
            </q-item>
            <q-item>
              <q-item-side icon="fas fa-user-circle"></q-item-side>
              <q-item-main>Otro Usuario</q-item-main>
            </q-item>
            <q-item>
              <q-item-side icon="fas fa-user-circle"></q-item-side>
              <q-item-main>Nombre Usuario</q-item-main>
            </q-item>
            <q-item>
              <q-item-side icon="fas fa-user-circle"></q-item-side>
              <q-item-main>Otro Usuario</q-item-main>
            </q-item>
            <q-item>
              <q-item-side icon="fas fa-user-circle"></q-item-side>
              <q-item-main>Nombre Usuario</q-item-main>
            </q-item>
            <q-item>
              <q-item-side icon="fas fa-user-circle"></q-item-side>
              <q-item-main>Otro Usuario</q-item-main>
            </q-item>
            
          </q-list>
          
      </div><!-- lista de chats -->
    

    What am i doing wrong?
    thanks for your help.


  • Admin

    It’s because of style="height: 60vh;".



  • thanks @rstoenescu, when i delete that style, the list border shrink itself and i wanted to vertical align it with the messages area (i thought that q-list tag should used for paint the exterior border)… i will wrapped in a div for paint a border around…

    Thanks for your help.