N
Nuxt•3mo ago
WiFi Plug

UCarousel (embla carousel) how to ensure width conforms to parents div?

I'm having issues with my Ucarousel not conforming its width to its parent div how can I solve this to ensure it does it properly? 
<template>
  <div
    class="flex flex-col gap-5 w-full pb-16 overflow-x-hidden mx-auto max-w-[var(--ui-container)]"
  >
    <!-- Heading -->
    <div class="flex justify-between items-baseline w-full">
      <!-- Category title -->
      <p class="font-semibold text-xl">Popular Products</p>

      <!-- Link to category page with dynamic count -->
      <NuxtLink
        to="/store"
        class="flex items-center gap-1 text-muted hover:text-default font-semibold text-sm transition-colors duration-200 group"
      >
        <span>See all ({{ totalCount }})</span>
        <UIcon
          name="i-heroicons-chevron-right"
          size="12"
          class="transform transition-transform duration-200 ease-out group-hover:translate-x-0.5"
        />
      </NuxtLink>
    </div>

    <!-- Loading state -->
    <div v-if="pending" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
      <div v-for="i in 4" :key="i" class="animate-pulse">
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg h-64"></div>
      </div>
    </div>

    <!-- Products carousel with shadows -->
    <div v-else-if="products.length > 0" class="relative">
      <UCarousel
        v-slot="{ item }"
        loop
        arrows
        dots
        :autoplay="{ delay: 2500 }"
        :items="products"
        :ui="{
          container: 'transition-[height]',
          viewport: 'overflow-visible',
          item: 'basis-4/5 sm:basis-1/2 md:basis-3/7 lg:basis-1/4',
          controls: 'absolute -bottom-8 inset-x-0 md:inset-x-12',
          dots: '-top-7 md:inset-x-0 inset-x-12',
          dot: 'w-6 h-1',
        }"
        class="w-full"
      >
        <StoreProductCard :product="item" />
      </UCarousel>
    </div>
  </div>
</template>
<template>
  <div
    class="flex flex-col gap-5 w-full pb-16 overflow-x-hidden mx-auto max-w-[var(--ui-container)]"
  >
    <!-- Heading -->
    <div class="flex justify-between items-baseline w-full">
      <!-- Category title -->
      <p class="font-semibold text-xl">Popular Products</p>

      <!-- Link to category page with dynamic count -->
      <NuxtLink
        to="/store"
        class="flex items-center gap-1 text-muted hover:text-default font-semibold text-sm transition-colors duration-200 group"
      >
        <span>See all ({{ totalCount }})</span>
        <UIcon
          name="i-heroicons-chevron-right"
          size="12"
          class="transform transition-transform duration-200 ease-out group-hover:translate-x-0.5"
        />
      </NuxtLink>
    </div>

    <!-- Loading state -->
    <div v-if="pending" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
      <div v-for="i in 4" :key="i" class="animate-pulse">
        <div class="bg-gray-200 dark:bg-gray-700 rounded-lg h-64"></div>
      </div>
    </div>

    <!-- Products carousel with shadows -->
    <div v-else-if="products.length > 0" class="relative">
      <UCarousel
        v-slot="{ item }"
        loop
        arrows
        dots
        :autoplay="{ delay: 2500 }"
        :items="products"
        :ui="{
          container: 'transition-[height]',
          viewport: 'overflow-visible',
          item: 'basis-4/5 sm:basis-1/2 md:basis-3/7 lg:basis-1/4',
          controls: 'absolute -bottom-8 inset-x-0 md:inset-x-12',
          dots: '-top-7 md:inset-x-0 inset-x-12',
          dot: 'w-6 h-1',
        }"
        class="w-full"
      >
        <StoreProductCard :product="item" />
      </UCarousel>
    </div>
  </div>
</template>
this is my component with the carousel is there something here I'm doing wrong?
5 Replies
kapa.ai
kapa.ai•3mo ago
Hi @WiFi Plug. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To ensure that your UCarousel (Embla Carousel) conforms to the width of its parent <div>, you should: 1. Set the parent container to w-full and a max width if needed:
You already have w-full and max-w-[var(--ui-container)] on your parent, which is correct. 2. Set the UCarousel itself to w-full:
You are already passing class="w-full" to UCarousel, which is also correct. 3. Check the item slot's basis/width:
The item slot in your :ui prop uses responsive basis-* classes. This is good for controlling how many items are visible, but if you want the carousel to always fill the parent, ensure that the sum of visible items' basis does not exceed 100% (e.g., basis-1/4 for 4 items per row). 4. Check for extra padding/margins:
If you use negative margins (like -ms-4 or ps-4), make sure they don't cause overflow or misalignment. The default theme for carousel uses these for horizontal orientation, so you may want to adjust or remove them if you see unwanted overflow or spacing issues Carousel Theme. 5. Viewport and container classes:
By default, the carousel's viewport uses overflow-hidden and the container uses flex items-start. You are overriding viewport with overflow-visible, which may cause the carousel to overflow its parent. Try removing overflow-visible unless you specifically need it. Example adjustment: 
<UCarousel
  v-slot="{ item }"
  loop
  arrows
  dots
  :autoplay="{ delay: 2500 }"
  :items="products"
  :ui="{
    container: 'transition-[height]',
    // Remove 'overflow-visible' unless you need it
    item: 'basis-4/5 sm:basis-1/2 md:basis-3/7 lg:basis-1/4',
    controls: 'absolute -bottom-8 inset-x-0 md:inset-x-12',
    dots: '-top-7 md:inset-x-0 inset-x-12',
    dot: 'w-6 h-1',
  }"
  class="w-full"
>
  <StoreProductCard :product="item" />
</UCarousel>
<UCarousel
  v-slot="{ item }"
  loop
  arrows
  dots
  :autoplay="{ delay: 2500 }"
  :items="products"
  :ui="{
    container: 'transition-[height]',
    // Remove 'overflow-visible' unless you need it
    item: 'basis-4/5 sm:basis-1/2 md:basis-3/7 lg:basis-1/4',
    controls: 'absolute -bottom-8 inset-x-0 md:inset-x-12',
    dots: '-top-7 md:inset-x-0 inset-x-12',
    dot: 'w-6 h-1',
  }"
  class="w-full"
>
  <StoreProductCard :product="item" />
</UCarousel>
Summary:
Your setup is mostly correct. The most likely issue is the use of overflow-visible on the viewport, which can cause the carousel to exceed its parent’s width. Try removing it and see if the carousel now conforms to the parent. Also, double-check your item basis classes to ensure they fit your design needs Carousel Usage. If you still have issues, inspect the carousel in your browser’s dev tools to see if any child element is exceeding the parent’s width due to custom classes or slot content. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
WiFi Plug
WiFi PlugOP•3mo ago
@kapa.ai overflow visible wasn't the issue I just tried removing it. currently it's only being restricted by the max-w ui container however the parent of that where I use the component is smaller than this. on the parent if i set the width to say w-50 it ends up constraining the carousel width correctly but I need it to just conform its size properly
kapa.ai
kapa.ai•3mo ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the official Nuxt UI documentation, the UCarousel component will inherit its width from its parent container if you set class="w-full" on the carousel and ensure the parent has a defined width. The documentation examples use w-full max-w-xs mx-auto or similar classes to control the carousel's width within its parent Carousel Usage. If your parent container is smaller than the default max-w-[var(--ui-container)], and you want the carousel to match the parent's width, you should: - Remove or adjust any max-w-* classes on the carousel or its direct parent that might override the parent's width. - Ensure the parent container has the desired width (e.g., w-1/2, w-96, or a responsive width class). - Keep w-full on the UCarousel so it fills the parent. For example, if your parent is: 
<div class="w-1/2">
  <UCarousel class="w-full" ... />
</div>
<div class="w-1/2">
  <UCarousel class="w-full" ... />
</div>
The carousel will fill half the screen, matching the parent. If you use max-w-[var(--ui-container)] on the parent, it will restrict the width to that value, regardless of the parent's actual width. Key point:
The carousel's width is determined by its parent. If you want it to always match the parent, avoid setting a larger max-w-* on the carousel or its parent than you intend. Use only w-full on the carousel itself. If you are still seeing issues, the knowledge sources do not provide further details on advanced width management or edge cases for UCarousel. You may need to inspect your layout for other conflicting styles or wrappers not shown in the documentation Carousel Usage. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?