Nuxt•4mo ago

Modal resize

Is there any way to change the width of the nuxt ui modal? Because I was looking and I can't make it wider and I need it to be wider

5 Replies

kapa.ai•4mo ago

Hi @Carlos. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The Nuxt UI Modal component does not provide a direct prop to set a custom width. By default, when not in fullscreen mode, the modal uses a fixed width defined by the class:

w-[calc(100vw-2rem)] max-w-lg

w-[calc(100vw-2rem)] max-w-lg

This means the modal will be at most max-w-lg (which is typically 32rem) and will shrink to fit smaller screens. The modal's width is controlled by the theme configuration under the fullscreen: false variant:

content: 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default'

content: 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-lg max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default'

To make the modal wider, you need to override the max-w-lg part in your theme configuration. For example, in your app.config.ts:

export default defineAppConfig({
  ui: {
    modal: {
      variants: {
        fullscreen: {
          false: {
            content: 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-3xl max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default'
          }
        }
      }
    }
  }
})

export default defineAppConfig({
  ui: {
    modal: {
      variants: {
        fullscreen: {
          false: {
            content: 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[calc(100vw-2rem)] max-w-3xl max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] rounded-lg shadow-lg ring ring-default'
          }
        }
      }
    }
  }
})

Here, max-w-3xl will make the modal significantly wider. You can adjust this value as needed (e.g., max-w-4xl, max-w-screen-md, etc.) according to your design requirements. Summary:
To change the width of the Nuxt UI Modal, override the content class for the fullscreen: false variant in your theme configuration and set a larger max-w-* value see the Modal theme documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@383506538251419649> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

CarlosOP•4mo ago

@kapa.ai And if I only want to change the width of one modal and not of all?

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The knowledge sources do not explicitly mention a built-in way to set a custom width for a single Nuxt UI Modal instance via a prop or slot. The documented approach for changing modal width is through the global theme configuration, which affects all modals see Modal theme. If you need per-modal customization, the official documentation does not provide a direct solution. You may consider using a custom class or style on the modal content via a slot or by extending the component, but this is not covered in the provided sources. Therefore, based on the available documentation, there is no officially supported way to change the width of only one modal without affecting all modals. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@383506538251419649> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Modal resize

Did you find this page helpful?