N
Nuxt•4mo ago
Uchuu

Why is opening this modal causing my entire page's contents to shift to the left by a fix pixels?

<UModal>
  <UButton color="secondary" variant="ghost" size="xl" class="font-bold cursor-pointer">
    Login
  </UButton>
  <template #content>
    <UCard class="p-6 space-y-6 shadow-xl">
        <div class="text-center space-y-2">
          <UIcon name="i-lucide-user" class="mx-auto text-black size-10" />
          <h2 class="text-3xl font-bold text-black">Login & Register</h2>
          <p class="text-base text-gray-500">Enter your credentials to access your account.</p>
        </div>

        <div class="rounded-lg pt-2 pb-2">
          <UButton block @click="signInWithGoogle" color="secondary" variant="link"
            class="text-md font-semibold text-gray-700 border border-gray-300 hover:bg-gray cursor-pointer">
            Continue with Google
          </UButton>
        </div>
        <div class="rounded-lg pb-3">
          <UButton block @click="signInWithGoogle" color="secondary" variant="link"
            class="text-md font-semibold text-gray-700 border border-gray-300 hover:bg-gray-50 cursor-pointer">
            Continue with Microsoft
          </UButton>
        </div>

        <div class="flex items-center gap-4 text-sm text-gray-400">
          <div class="h-px flex-1 bg-gray-200" />
          or
          <div class="h-px flex-1 bg-gray-200" />
        </div>

        <UForm :schema="schema" :state="state" class="space-y-2 pt-1" @submit="onSubmit">
          <UFormField label="Email" name="email">
            <UInput color="secondary" v-model="state.email" placeholder="Enter your email" class="w-full" />
          </UFormField>

          <UButton @click="signInWithOtp" type="submit" block color="secondary"
            class="font-bold cursor-pointer">
            Continue
          </UButton>
        </UForm>
      </UCard>
  </template>
</UModal>
<UModal>
  <UButton color="secondary" variant="ghost" size="xl" class="font-bold cursor-pointer">
    Login
  </UButton>
  <template #content>
    <UCard class="p-6 space-y-6 shadow-xl">
        <div class="text-center space-y-2">
          <UIcon name="i-lucide-user" class="mx-auto text-black size-10" />
          <h2 class="text-3xl font-bold text-black">Login & Register</h2>
          <p class="text-base text-gray-500">Enter your credentials to access your account.</p>
        </div>

        <div class="rounded-lg pt-2 pb-2">
          <UButton block @click="signInWithGoogle" color="secondary" variant="link"
            class="text-md font-semibold text-gray-700 border border-gray-300 hover:bg-gray cursor-pointer">
            Continue with Google
          </UButton>
        </div>
        <div class="rounded-lg pb-3">
          <UButton block @click="signInWithGoogle" color="secondary" variant="link"
            class="text-md font-semibold text-gray-700 border border-gray-300 hover:bg-gray-50 cursor-pointer">
            Continue with Microsoft
          </UButton>
        </div>

        <div class="flex items-center gap-4 text-sm text-gray-400">
          <div class="h-px flex-1 bg-gray-200" />
          or
          <div class="h-px flex-1 bg-gray-200" />
        </div>

        <UForm :schema="schema" :state="state" class="space-y-2 pt-1" @submit="onSubmit">
          <UFormField label="Email" name="email">
            <UInput color="secondary" v-model="state.email" placeholder="Enter your email" class="w-full" />
          </UFormField>

          <UButton @click="signInWithOtp" type="submit" block color="secondary"
            class="font-bold cursor-pointer">
            Continue
          </UButton>
        </UForm>
      </UCard>
  </template>
</UModal>
2 Replies
kapa.ai
kapa.ai•4mo ago
Hi @Uchuu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The behavior you're describing—where opening a modal causes the page content to shift left by a fixed number of pixels—is typically due to the browser hiding the scrollbar when the modal is open. This is a common pattern in modal implementations: when a modal is opened, the page's overflow is set to hidden to prevent background scrolling, which removes the scrollbar and causes the content to shift. While the provided Nuxt UI documentation does not explicitly mention this behavior or provide a built-in solution for it, this is a standard side effect of modals that use overlays and lock background scrolling. The Nuxt UI modal component uses a fixed overlay and content, which likely triggers this behavior when the modal is open, as seen in the default slot and theme configuration for overlays and content: 
overlay: 'fixed inset-0 bg-elevated/75',
content: 'fixed bg-default divide-y divide-default flex flex-col focus:outline-none',
overlay: 'fixed inset-0 bg-elevated/75',
content: 'fixed bg-default divide-y divide-default flex flex-col focus:outline-none',
Modal Theme Configuration If you want to prevent this shift, you would typically add padding to the body equal to the scrollbar width when the modal is open, but the knowledge sources do not provide a built-in prop or method for this in Nuxt UI. You may need to handle this manually in your project. In summary, the shift is caused by the removal of the scrollbar when the modal is open, and this is a side effect of how modals are implemented in Nuxt UI, but the documentation does not mention a direct fix or prop for this behavior. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4mo ago
<@1035470271441805353> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?