Faire face à des problèmes de débordement avec React Slick

Question

J'utilise React slick pour créer un curseur, la carte du curseur contient un menu déroulant avec de nombreuses options. Lorsque le menu déroulant est ouvert, la moitié du menu déroulant est rognée et le menu déroulant complet ne peut pas être affiché.

Code Pen : https://codepen.io/gtm18/pen/YzRdaML (démo avec jQuery)

$(document).ready(function(){
  $('.carousel').slick({
  slidesToShow: 3,
  dots:true,
  centerMode: true,
  });
});

Answer 1

Vous pouvez limiter la hauteur du menu déroulant, ce qui ajoutera une barre de défilement et vous pourrez voir toutes les options, comme ceci :

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
  max-height: 240px;
}

Pour voir une démo plus détaillée, consultez cette démo de code :

https://codepen.io/gtm18/pen/YzRdaML