I am using react slick to make a slider, the slider card contains a drop-down menu with many options. When the dropdown is open, half of the dropdown is cropped and the full dropdown cannot be viewed.
Codepen: https://codepen.io/gtm18/pen/YzRdaML (demo with jQuery)
$(document).ready(function(){
$('.carousel').slick({
slidesToShow: 3,
dots:true,
centerMode: true,
});
});
P粉8981078742023-09-18 00:43:51
You can limit the height of the drop-down menu, which will add a scroll bar and you can see all the options, like this:
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
max-height: 240px;
}
To see a more detailed demo, check out this code demo:
https://codepen.io/gtm18/pen/YzRdaML