Mi aplicación web incluye menús desplegables de Bootstrap 5 construidos dinámicamente que pueden ser bastante grandes. Necesitan ser redimensionados y reposicionados para hacer el mejor uso del espacio de la pantalla. Entonces, me gustaría poder controlar o ajustar el desplazamiento calculado por Popper.js a través de javascript. Pero no he sido hacer este trabajo. La documentación de Popper.js no es tan clara y no he encontrado ninguna documentación o ejemplos de cómo hacer esto dentro de Bootstrap 5. (El atributo data-bs-offset no es adecuado ya que no puede invocar una función para proporcionar dinámica valores compensados.)

Consulte el ejemplo de código en JSFiddle https://jsfiddle.net/Martin_ATS/cqw5mjLv/3/ . Puedo acceder al objeto desplegable tanto a través de bootstrap.Dropdown.getInstance() como a través de jQuery $(ddelem).dropdown() , como se demuestra en la función hideDropdown() . Pero no he podido cambiar el desplazamiento a través de javascript a pesar de varios intentos de llamar a setOptions() etc.

Me gustaría usar el desplazamiento y calculado de Bootstrap/Popper, pero ajuste el desplazamiento x para que el menú se abra más cerca del margen izquierdo e, idealmente, deje un margen derecho en lugar de presionar el lado derecho de la ventana. El fragmento de código es un ejemplo simplificado. En la aplicación real, el contenido del menú desplegable puede variar desde pequeño (para el cual los desplazamientos normales de Bootstrap/Popper funcionan bien) hasta muy grande (incluido el desplazamiento horizontal o vertical).

¡Gracias!