bootstrap-select con JQuery slimscroll error de visualización

Actualmente estoy usando el plugin boostrap-select 1.12.2 para mostrar algunos widgets de filtro. Estos widgets se muestran en el lado izquierdo de la página y se agregan dinámicamente. La lista de widgets puede ser bastante larga (más de 20 filtros), así que los muestro en una división desplazable, utilizando JQuery slimScroll 1.3.8. Funciona bien cuando las opciones en selectpicker son pequeñas, sin embargo, cuando las opciones son largas, no se muestran correctamente:

introduzca la descripción de la imagen aquí

mientras que me gustaría tener esto (obtenido cuando slimScroll está deshabilitado):

introduzca la descripción de la imagen aquí

Supongo que esto es solo un problema de desbordamiento de css, pero no puedo encontrar una manera de solucionarlo … Aquí hay un bolígrafo que demuestra el problema: codepen

html:

js

 $('#content').slimScroll({ height: '550px' }); function loadWidget() { var options = 'very long option text that doesnt fit in selectpickeryet another option'; var html = '
' + options + '
'; $('#parent').html(html); $('#SQ').selectpicker('refresh'); }

Intente usar la opción de container y configurarlo en body :

https://silviomoreto.github.io/bootstrap-select/examples/#container

Agregue la selección a un elemento específico, por ejemplo, container: 'body' o data-container=".main-content"

Esto podría solucionar el problema, pero no lo he probado. No sé cómo se comportará con jQuery-slimScroll. También encontré este problema que podría ayudar:

https://github.com/silviomoreto/bootstrap-select/issues/1552

El menú necesita ser informado cuando actualizar su posición. El complemento detecta automáticamente cuando la ventana se desplaza / cambia de tamaño. Entonces, recomiendo algo como:

 $('#grid').on('scroll', function() { $(window).scroll(); }); 

En su caso, tiene que hacer particiones y en la primera partición tiene una entrada y debajo de la casilla de sugerencias, si desea que se superponga a la segunda partición, debe hacer la posición absolute de la casilla de sugerencias con el z-index más alto z-index css

Agrega este estilo para arreglarlo (probado en Chrome y Firefox).

 #content{ margin-left:0px; } .container-fluid > div{ width:100%; } 

Creo que no es necesario que coloques el widget de selección dentro de slim scroll div, slim scroll está agregando desbordamiento: oculto si lo quitas, el div no será desplazable

aquí una pluma actualizada

  

text

text

text

text

text

text

    Intereting Posts