CODEWITHSUNDEEP
javascripthtmlcssstylesoverlay
Lukas Méndez Duus
Lukas Méndez Duus

Reputation: 436

Place element on top of other (Create overlay)

I'm still a bit new to HTML and CSS and need some help.

I have a div and inside that, I have an telephone input element. The input is using a library that allows the user to select a country code.

The problem is, that when I click on the country code it stays inside the parent div, which is not what I want.

enter image description here

As you can see on the image the desired behaivour is to have the red box outside of the blue one. I have set the parent elements position property to 'relative' (the blue box) and the country code container (the red one) to 'absolute', but it doesn't help. I've also tried changing the z-index without luck.

The red box as shown on the picture has the following styles:

.iti__country-list {
position: absolute;
z-index: 2;
list-style: none;
text-align: left;
padding: 0;
margin: 0 0 0 -1px;
box-shadow: 1px 1px 4px rgb(0 0 0 / 20%);
background-color: white;
border: 1px solid #CCC;
white-space: nowrap;
max-height: 200px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}

And the blue one:

.drag-container {
display: grid;
max-height: 600px;
overflow-y: auto;
padding: 10px;
position: relative;
}

I can almost get the desired output by setting position to 'fixed', but thats not good when resizing the page as it stays in its position.

Upvotes: 0

Views: 285

Answers (2)

pouria gh
pouria gh

Reputation: 28

I think the problem is in .drag-container class ... remove overflow:auto or change it to overflow:unset

Upvotes: 1

Nikolay
Nikolay

Reputation: 535

you can try using the select2.js plugin for select, it creates a dropdown at the end of the body element regardless of the parent's location

Upvotes: 0

Related Questions