css - bottom - daterangepicker
Problema pegajoso en bootstrap datepicker (6)
Este problema no está relacionado con un entorno específico (no solo iOS) y tiene una solución como la siguiente:
Debería averiguar qué clase de div divisor de fecha configura el selector de fecha en realidad de oculto a visible (cuál de ellos cambia al mostrar con éxito y ocultar el evento).
Agregue a su css para esa clase (aquí modal-open) el comando show faltante:
body.modal-open {
overflow: visible;
}
Ahora el rollo debe permanecer en su lugar.
Ejemplo se refiere a html como:
<body>
<div class="modal-open">
Datepicker
</div>
</body>
Fuente:
Modalidad de arranque: el fondo salta a la parte superior al alternar
PD. Mi fuente también tiene otras 18 opciones, si esto parece demasiado intrépido.
He hecho este actual una vez, funcionó a la perfección y no fue tan difícil de hacer.
Estoy usando bootstrap datepicker en un sitio web. También está diseñado para ser pegajoso al darle a su padre una posición fija. Funciona bien normalmente, pero al probarlo en Ipad y Iphone (aún no probado en dispositivos Android), cuando me desplazo hacia abajo trate de tocar el selector de fecha para abrirlo, se desplaza de nuevo a la parte superior de la página, ¿cómo puedo solucionar este problema?
Un problema similar surge cuando estoy usando un menú desplegable personalizado Selectric
He creado una versión simple del problema here . Tenga en cuenta que el problema no se replica en el emulador sino en un dispositivo móvil o ipad real.
Para empezar, ¿has mirado a través de los problemas del repositorio de GH para encontrar algo que coincida con tu descripción?
Este enlace específicamente suena prometedor:
Creo que lo que podría estar ocurriendo es que tu selector de fecha está configurado como absoluto del cuerpo, no el padre que estás configurando como "fijo".
Entonces, al hacer clic para abrir el selector de fechas, su dispositivo móvil lo está desplazando al elemento activo (en este caso, el selector de fechas en la parte superior, establecido en absoluto en el elemento primario).
También parece haber algún comportamiento móvil predeterminado relacionado con el desplazamiento:
Tal vez la configuración de lo siguiente ayudará:
-webkit-overflow-scrolling: auto; /* Stops scrolling immediately */
El siguiente enlace proporciona más contexto sobre este comportamiento de desplazamiento:
Prueba esto
.dropdown-menu{
position: fixed!important
}
También enfrenté el mismo problema y lo resolví como la solución a continuación, puede intentarlo. datepicker tiene una propiedad previaMostrar donde tiene que establecer la posición del calendario.
$("#EffectiveDateAccept").datepicker({
changeMonth: true,
changeYear: true,
// minDate: 0,
dateFormat: ''mm/dd/yy'',
beforeShow: function (input, inst) {
var calendar = inst.dpDiv;
setTimeout(function () {
calendar.position({
my: ''center bottom'',
at: ''top'',
collision: ''none'',
of: input
});
}, 1);
}
});
simplemente agregue este código CSS a su sitio para solucionar ese problema.
.element{
position: sticky!important;
}