Nuxt•4d ago

Popover being covered by other components.

I have a component that contains a popover and I am using a v-for loop on the component. When the components are listed out, the ones below the component you click on cover the popover. Here is the component code.

<script setup lang="js">
const props = defineProps({
  commission: Object
})
</script>

<template>
  <div class="bg-gray-200 dark:bg-gray-800 p-2 min-w-min w-full h-min rounded-lg drop-shadow ">
    <div class="flex justify-between items-center">
      <div class="flex space-x-2">
        <div class="w-10 overflow-hidden">
          <p>{{commission.commissionId}}</p>
        </div>
        <div class="w-64 overflow-hidden">
          <p>{{commission.organization.organizationName}}</p>
        </div>
        <div class="w-64 overflow-hidden">
          <p>{{commission.quote.toFixed(2)}}</p>
        </div>
        <div class="w-32 overflow-hidden">
          <UPopover class="">
            <UButton label="View Details"/>

            <template #panel>
              <p>{{commission.details}}</p>
            </template>
          </UPopover>

        </div>
      </div>
      <Authorize role="Internal" :permissions="['organization.write']">
        <template #success>
          <UButton @click="openModifyModal" :padded="false" class="h-min px-3 py-2 ml-10 animatedButton">Modify</UButton>
        </template>
      </Authorize>
    </div>
  </div>
</template>

<script setup lang="js">
const props = defineProps({
  commission: Object
})
</script>

<template>
  <div class="bg-gray-200 dark:bg-gray-800 p-2 min-w-min w-full h-min rounded-lg drop-shadow ">
    <div class="flex justify-between items-center">
      <div class="flex space-x-2">
        <div class="w-10 overflow-hidden">
          <p>{{commission.commissionId}}</p>
        </div>
        <div class="w-64 overflow-hidden">
          <p>{{commission.organization.organizationName}}</p>
        </div>
        <div class="w-64 overflow-hidden">
          <p>{{commission.quote.toFixed(2)}}</p>
        </div>
        <div class="w-32 overflow-hidden">
          <UPopover class="">
            <UButton label="View Details"/>

            <template #panel>
              <p>{{commission.details}}</p>
            </template>
          </UPopover>

        </div>
      </div>
      <Authorize role="Internal" :permissions="['organization.write']">
        <template #success>
          <UButton @click="openModifyModal" :padded="false" class="h-min px-3 py-2 ml-10 animatedButton">Modify</UButton>
        </template>
      </Authorize>
    </div>
  </div>
</template>

Then the component is used like this

<div>
   <Component v-for=“item in list” :commission=“item”/>
</div>

<div>
   <Component v-for=“item in list” :commission=“item”/>
</div>

5 Replies

kapa.ai•4d ago

Hi @BeanFeed. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're experiencing with the popover being covered by other components is related to the z-index stacking context. To resolve this, you can use the popper prop of the UPopover component to adjust its z-index. Here's how you can modify your code to fix this issue:

<UPopover :popper="{ strategy: 'fixed', zIndex: 9999 }">
  <UButton label="View Details"/>

  <template #panel>
    <p>{{commission.details}}</p>
  </template>
</UPopover>

<UPopover :popper="{ strategy: 'fixed', zIndex: 9999 }">
  <UButton label="View Details"/>

  <template #panel>
    <p>{{commission.details}}</p>
  </template>
</UPopover>

By setting the strategy to 'fixed' and specifying a high zIndex value, you ensure that the popover appears above other components. This solution is based on the information provided in the Popover documentation. The popper prop allows you to customize the popper instance, including its positioning strategy and z-index. If this doesn't fully resolve your issue, you might also want to consider wrapping your entire component in a UContainer or adjusting the z-index of the parent elements to ensure proper stacking context. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

BeanFeedOP•4d ago

Here is a ss

BeanFeedOP•4d ago

This is what happens when I set the popover to overlay

BeanFeedOP•3d ago

This issue is resolved. It was caused by the tailwind drop shadow. If anyone is able to explain why that is then please let me know.

Gaming

Programming

Popover being covered by other components.

Did you find this page helpful?