Nuxt•2w ago

Increase Width of Modal

How can I increase the width of a modal?

5 Replies

Hi @Just Simeon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To increase the width of a modal in Nuxt UI, you have a few options: Using the UI prop You can customize the modal width by modifying the ui prop and targeting the content slot. The default max width for a non-fullscreen modal is max-w-lg, which you can override:

<template>
  <UModal 
    v-model:open="open" 
    :ui="{ 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-[calc(var(--ui-radius)*2)] shadow-lg ring ring-(--ui-border)' }"
  >
    <!-- Modal content -->
  </UModal>
</template>

<template>
  <UModal 
    v-model:open="open" 
    :ui="{ 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-[calc(var(--ui-radius)*2)] shadow-lg ring ring-(--ui-border)' }"
  >
    <!-- Modal content -->
  </UModal>
</template>

Using the Theme Configuration For a global change to all modals, you can modify the theme configuration: 1. In your app.config.ts file:

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-[calc(var(--ui-radius)*2)] shadow-lg ring ring-(--ui-border)'
          }
        }
      }
    }
  }
})

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-[calc(var(--ui-radius)*2)] shadow-lg ring ring-(--ui-border)'
          }
        }
      }
    }
  }
})

2. Or in your vite.config.ts file:

export default defineConfig({
  plugins: [
    vue(),
    ui({
      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-[calc(var(--ui-radius)*2)] shadow-lg ring ring-(--ui-border)'
              }
            }
          }
        }
      }
    })
  ]
})

export default defineConfig({
  plugins: [
    vue(),
    ui({
      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-[calc(var(--ui-radius)*2)] shadow-lg ring ring-(--ui-border)'
              }
            }
          }
        }
      }
    })
  ]
})

Example for Specific Modal Types For specific modal types like ContentSearch, you can target them directly:

export default defineAppConfig({
  uiPro: {
    contentSearch: {
      slots: {
        modal: 'sm:max-w-3xl sm:h-[28rem]'
      }
    }
  }
})

export default defineAppConfig({
  uiPro: {
    contentSearch: {
      slots: {
        modal: 'sm:max-w-3xl sm:h-[28rem]'
      }
    }
  }
})

ContentSearch Theme The key is to modify the max-w-* class to a larger size (like max-w-xl, max-w-2xl, max-w-3xl, etc.) or use a custom width with w-[600px] or similar. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

Just SimeonOP•2w ago

@kapa.ai now the title and description is hidden for some reason.

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- If the title and description of your modal are hidden after increasing the width, this is likely due to a CSS issue with the customized UI prop overriding the default styling for the header section. Let me help you fix this. Solution for Hidden Title and Description When you customize the content slot in the UI prop, you need to make sure you're not removing essential classes that control the visibility of other elements. Here's how to fix it: 1. Make sure you're only modifying the width-related classes and preserving the rest of the default styling:

<template>
  <UModal 
    v-model:open="open" 
    title="Your Title"
    description="Your Description"
    :ui="{ 
      content: 'fixed bg-(--ui-bg) divide-y divide-(--ui-border) flex flex-col focus:outline-none 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-[calc(var(--ui-radius)*2)] shadow-lg ring ring-(--ui-border)'
    }"
  >
    <!-- Modal content -->
    <template #body>
      Your content here
    </template>
  </UModal>
</template>

<template>
  <UModal 
    v-model:open="open" 
    title="Your Title"
    description="Your Description"
    :ui="{ 
      content: 'fixed bg-(--ui-bg) divide-y divide-(--ui-border) flex flex-col focus:outline-none 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-[calc(var(--ui-radius)*2)] shadow-lg ring ring-(--ui-border)'
    }"
  >
    <!-- Modal content -->
    <template #body>
      Your content here
    </template>
  </UModal>
</template>

2. Alternatively, if you're using the #content slot instead of the #body slot, the title and description won't show because the header is part of the structured layout:

<template>
  <UModal v-model:open="open">
    <UButton label="Open" />
    
    <!-- Using the structured slots approach -->
    <template #header>
      <h3 class="text-(--ui-text-highlighted) font-semibold">Your Title</h3>
      <p class="mt-1 text-(--ui-text-muted) text-sm">Your Description</p>
    </template>
    
    <template #body>
      Your content here
    </template>
  </UModal>
</template>

<template>
  <UModal v-model:open="open">
    <UButton label="Open" />
    
    <!-- Using the structured slots approach -->
    <template #header>
      <h3 class="text-(--ui-text-highlighted) font-semibold">Your Title</h3>
      <p class="mt-1 text-(--ui-text-muted) text-sm">Your Description</p>
    </template>
    
    <template #body>
      Your content here
    </template>
  </UModal>
</template>

Important Note on Modal Structure According to the Modal documentation, there are two ways to use the modal: 1. Using the #content slot for complete customization (which doesn't include the built-in header) 2. Using the structured approach with title, description props and the #body, #footer slots If you're using the first approach but want a title and description, you'll need to add them manually inside your content. Check Your Implementation Make sure you're not: - Using the #content slot while also expecting the title and description props to work - Overriding the header styles in your UI customization - Missing the required structure for the modal content If you need more specific help, please share your current implementation code so I can provide more targeted assistance. Modal Documentation ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

Gaming

Programming

Increase Width of Modal

Did you find this page helpful?