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

[mboeni]

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:

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

Cheers,
Michael

[mboeni]

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