Modal dialog uses space where it shouldn't (Solved)



  • Hi there

    I’m trying to find a nice way to display user messages and have come up with the following:

    <div class="q-pa-md q-gutter-sm">
    <q-dialog v-model="userMessageDialog" position="top">
      <q-card style="width: 350px">
        <q-linear-progress :value="0.6" color="pink" />
    
        <q-card-section class="row items-center no-wrap">
          <q-btn flat round icon="error" />
    
          <q-space />
    
          <div>
            <div class="text-weight-bold">User Message</div>
            <div class="text-grey">This is the message. Very important. Do read it.</div>
          </div>
        </q-card-section>
      </q-card>
      </q-dialog>
    </div>
    

    What I get is this:
    Annotation 2019-11-16 001435.png

    Why is the dialog using space on the page below? The white segment on the top shoudn’t be there…

    Cheers,
    Michael



  • Got it…It was a mix between code-positioning and the <q-page-container> -.-


Log in to reply