Zebra_DatePicker im Sticky Div folgt der Eingabe beim Scrollen nicht [geschlossen] ⇐ HTML

[Anonymous]

Ich verwende Zebra_DatePicker (v2.2.0) mit einem Eingabefeld, das sich in einem Container befindet
unter Verwendung von position: sticky.
Der Sticky-Container funktioniert ordnungsgemäß und bleibt beim Scrollen fixiert.
Wenn jedoch Zebra_DatePicker geöffnet wird, bleibt das Kalender-Popup nicht
an das Eingabefeld gebunden. Wenn die Seite gescrollt wird, bewegt sich der Sticky-Container,
aber der Datepicker bleibt an seiner ursprünglichen Position und wird falsch ausgerichtet.

• Zebra_DatePicker-Version: 2.2.0
• jQuery-basierte Initialisierung
• Das Eingabeelement befindet sich in einem Position: Sticky-Container
• Das Datepicker-Popup wird angehängt der durch das Plugin

Was ich will:

• Das Datumsauswahl-Popup soll immer am Eingabefeld ausgerichtet bleiben
  während sich der Sticky-Container beim Scrollen bewegt.

Was ich versucht habe:

• CSS-Änderungen (Position: fest / absolut)
• Auf Scroll-Ereignisse hören
• Datumsauswahl manuell neu positionieren

Aber keine dieser Lösungen fühlt sich stabil oder sauber an.
Gibt es eine empfohlene oder saubere Möglichkeit, Zebra_DatePicker einer Eingabe
in einem Position: Sticky-Container folgen zu lassen?
Oder ist dies eine bekannte Einschränkung von Zebra_DatePicker?
Diese Demo:
https://playcode.io/html-playground--01 ... 0fb567c541
HTML

Code: Select all

Modern Landing Page








window.jQuery || document.write('')









body{
padding:50px
}
h1{
text-align:center;
}
.container{
background-color:white;
padding:50px;
display:flex;
gap:20px;
max-width: 800px;
margin: 0 auto;
}
.content-left{
position: sticky;
top:0%;
height: 500px;
width:100%;
border:1px solid black;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:20px
}
.content-right{
height: 9999px;
width:100%;
border:1px solid red;
display:flex;
justify-content:center;
padding: 20px
}




Click Open Date Picker and Scroll


Content-Left


Content-Right

JS

Code: Select all

$(document).ready(function() {

// assuming the controls you want to attach the plugin to
// have the "datepicker" class set
$('input.datepicker').Zebra_DatePicker();

});