Question 364948 in Html Question posted in
Some basic documentation can be found here.

Html – Custom select with absolute position going behind the parent divs

I have a custom select which works well.

I also have a div, which opens and closes based on a state. Based on that state I change the height and overflow hidden to open and close the div.

When I use my select inside this div. It comes correctly when the dropdown comes below, but goes behind parent when the position is on top. (the select switches between top and bottom based on the remaining space in the screen).

I have added the images below.

I checked all the parent divs for any overflow or position issue, but couldn’t find any.

Dropdown below
Drop down on top

I have a div visibility problem.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    It seems like the overflow was the issue. I was also facing another problem with the same dropdown because of the overflow property.

    I searched everywhere for solution, but couldn't find any.

    So I used a popover component from shadcn-ui. which will render the select dropdown with a position relative to screen using the select's position, instead of relative to select itself. (Which I did).

    The component I used was shadcn-ui PopOver Component.


  2. 0

    Have you tried to add z-index: 200000; to the element?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search