Facing overflow issues with React Slick-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)

Facing overflow issues with React Slick

P粉827121558 2023-09-17 10:16:57

291

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粉827121558

reply all(1)

P粉8981078742023-09-18 00:43:51 1 floor

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