Параметры раскрывающегося списка отображаются за его пределами и недоступны для выбора. ⇐ CSS

[Anonymous]

У меня есть выпадающее меню с настройкой точно так же, как и другие выпадающие меню. Это выпадающее меню, однако, отображает его параметры под ним и не позволяет мне выбрать элемент. выбираются. < /p>
html -код: < /p>

Код: Выделить всё

Select item to be removed:



Remove

< /code>
код JavaScript, используемый для добавления параметров в раскрывающийся список: < /p>
//Create new option
const option = document.createElement('option');
option.textContent = item;
// Add option to the list
document.getElementById('itemRemover').appendChild(option);
< /code>
css code: < /p>
/* Resetting default styles */
body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}

.container {
text-align: center;
}

/* Heading on Top of Image */
.image-with-heading {
position: relative;
width: 100%;
max-width: 600px; /* Adjust the width of the image */
margin: 20px auto; /* Center alignment */
}

.image-with-heading img {
width: 100%;
height: auto;
display: block;
border-radius: 10px;
}

.image-with-heading .heading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: black;
font-size: 2rem;
font-weight: bold;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
margin: 0;
}

/* Image with Input Fields */
.image-with-inputs {
position: relative;
width: 100%;
max-width: 600px; /* Adjust the width of the image */
margin: 20px auto; /* Center alignment */
overflow: visible;
}

.image-with-inputs img {
width: 100%;
height: auto;
display: block;
border-radius: 10px;
}

/* Input fields stacked underneath each other, with labels, on top of the image */
.image-with-inputs .input-group {
position: absolute;
top: 50%; /* Adjust vertical alignment */
left: 50%; /* Center horizontally */
transform: translate(-50%, -50%); /* Center both horizontally and vertically */
display: flex;
flex-direction: column; /* Stack inputs vertically */
gap: 10px; /* Space between inputs and their labels */
overflow: visible;
}

/*Horisontal wrapper*/
.input-group .hor-container{
display: flex;
align-items: center;
gap: 5px;
overflow: visible;
}

/*Vertical wrapper*/
.input-group .vertical-container{
position: absolute;
top: 50%; /* Adjust vertical alignment */
left: 50%; /* Center horizontally */
transform: translate(-50%, -50%); /* Center both horizontally and vertically */
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
overflow: visible;
}

/* Wrapper for each input field */
.input-group .input-wrapper {
display: flex;
flex-direction: column;
align-items: center; /* Center text and inputs */
gap: 2px; /* Space between label and input */
overflow: visible;
}

/* Label styling */
.input-wrapper .label {
font-size: 1rem;
font-weight: bold;
color: white;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

/* Input styling */
.input-wrapper .input {
padding: 5px 0px;
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1rem;
width: 250px; /* Adjust width for better readability */
text-align: center;
transition: border-color 0.3s, box-shadow 0.3s;
}

.input-wrapper .input:focus {
border-color: #000;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
outline: none;
}

.button{
padding: 5px 10px;
background-color: rgba(255, 255, 255, 0.8);
border: none;
border-radius: 5px;
color: black;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s;
width: 250px; /* Fixed width for buttons */
text-align: center;
}

.button:hover {
background-color: rgba(0, 0, 0, 0.8);
color: white;
}

.square {
width: 200px; /* Size of the square */
height: 200px;  /* Size of the square */
background-color: white;
border-radius: 10px;
display: flex;
}

/* Dropdown fields stacked underneath each other, with labels, on top of the image */
.image-with-inputs .dropdown-group {
position: absolute;
top: 50%; /* Adjust vertical alignment */
left: 50%; /* Center horizontally */
transform: translate(-50%, -50%); /* Center both horizontally and vertically */
display: flex;
flex-direction: column; /* Stack dropdowns vertically */
gap: 10px; /* Space between dropdowns and their labels */
overflow: visible;
}

/* Wrapper for each dropdown */
.dropdown-group .dropdown-wrapper {
display: flex;
flex-direction: column;
align-items: center; /* Center text and dropdown */
gap: 5px; /* Space between label and dropdown */
overflow: visible !important;
}

/* Label styling */
.dropdown-wrapper .label {
font-size: 1rem;
font-weight: bold;
color: white;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

/* Dropdown styling */
.dropdown-wrapper .dropdown {
padding: 5px 10px;
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1rem;
width: 250px; /* Adjust width for better readability */
text-align: center;
transition: border-color 0.3s, box-shadow 0.3s;
}

.dropdown-wrapper .dropdown:focus {
border-color: #000;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
outline: none;
}

/* Basic styling for the button */
.image-button {
display: flex;
width: 30px;
height: 30px;
background-color: #ffffff;
color: white;
border: none;
border-radius: 5px;
align-items: center;
justify-content: center;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}

/* Image inside the button */
.image-button .button-image {
object-fit: contain; /*Resizes image image*/
}

/* Hover effect */
.image-button:hover {
background-color: #ffffff;
filter: invert(1);
}

.memo {
text-align: left;
border-radius: 10px;
border: 1px solid #ddd;
padding: 10px;
width: 230px;
background-color: #dddddd;
}

.memo h2 {
font-size: 18px;
color: black;
margin-bottom: 5px;
}

.memo-content {
/* Set maximum height for scrollable content */
max-height: 100px;
overflow-y: auto;
border: 1px solid #ccc;
padding: 5px;
border-radius: 5px;
background-color: white;
}

#memoList {
list-style-type: none;
padding: 0;
margin: 0;
background-color: white;
}

#memoList li {
background-color: white;
padding: 0;
margin: 1px 0;
border-radius: 15px;
font-size: 16px;
}

.item-wrapper {
display: flex;
flex-direction: column;
align-items: center; /* Center text and inputs */
gap: 10px; /* Space between label and input */
border: 1px solid #ccc;
padding: 5px;
border-radius: 5px;
overflow: visible;
}

.label {
font-size: 18px;
font-weight: bold;
color: white;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

Изображение проблемы:
введите здесь описание изображения
Я попробовал использовать переполнение: видимый для родительского элемента, и я попробовал уменьшить другие элементы на странице, так как думал, что проблема в том, что страница слишком заполнена.

Код: Выделить всё

// This itemsList has items
var itemsList = ['apple', 'banana', 'cherry', 'berry']
if (itemsList.length !== 0) {
document.getElementById('itemRemover').style.display = 'block';

itemsList.forEach(item =>  {
//Create new option
const option = document.createElement('option');
option.textContent = item;
// Add option to the list
document.getElementById('itemRemover').appendChild(option);
});
}< /code>
/* Dropdown fields stacked underneath each other, with labels, on top of the image */
.image-with-inputs .dropdown-group {
position: absolute;
top: 50%;
/* Adjust vertical alignment */
left: 50%;
/* Center horizontally */
transform: translate(-50%, -50%);
/* Center both horizontally and vertically */
display: flex;
flex-direction: column;
/* Stack dropdowns vertically */
gap: 10px;
/* Space between dropdowns and their labels */
overflow: visible;
}

/* Wrapper for each dropdown */
.dropdown-group .dropdown-wrapper {
display: flex;
flex-direction: column;
align-items: center;
/* Center text and dropdown */
gap: 5px;
/* Space between label and dropdown */
overflow: visible !important;
}

/* Label styling */
.dropdown-wrapper .label {
font-size: 1rem;
font-weight: bold;
color: white;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

/* Dropdown styling */
.dropdown-wrapper .dropdown {
padding: 5px 10px;
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1rem;
width: 250px;
/* Adjust width for better readability */
text-align: center;
transition: border-color 0.3s, box-shadow 0.3s;
}

.dropdown-wrapper .dropdown:focus {
border-color: #000;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
outline: none;
}< /code>

Select item to be removed:



Remove

Подробнее здесь: https://stackoverflow.com/questions/793 ... selectable