| 

.NET C# Java Javascript Exception

2
Hallo,

ich hab einen Div-Container, mit dem ich aus overflow:auto und overflow:hidden Containern ausbrechen will. Das ganze brauche ich für einen Date-Picker, der aus anderen scrollbaren Containern herausragen soll. Momentan muss man nämlich immer den Container scrollen um dann z.B. die letzten Zeilen des Kalenders sehen zu können, was sehr unschön und umständlich zu bedienen ist.

Zur vereinfachten Darstellung des Problems hab ich hier mal einen Plunker erstellt.

Wenn es irgendwie machbar ist, würde ich das Problem gerne nur mit HTML und CSS in den Griff bekommen.
News:
21.08.2014
Smartin 35 5
1 Antwort
0
Dein Problem ist die Kombination von position:relative der Elternelemente mit overflow:auto/hidden.

Durch position:relative bleiben alle Kind-Elemente, die position:absolute haben, innerhalb des Eltern-Elements "gefangen", statt auf die oberste Ebene ausgelagert zu werden.

Bei deinem Beispiel reicht es alle position:relative zu entfernen und .wrapper noch ein margin-top:50px (unter margin: 0 auto!) zu geben (damit der Abstand von Oben wieder stimmt). Für komplexere Layouts wird das meistens etwas schwieriger bis unmöglich. Es hängt von deinem konkreten Layout ab, ob das ohne JS realisiert werden kann.

Wenn du willst und darfst kannst du ja mal dein konkretes Layout zur Verfügung stellen, dann kann man sich das genauer ansehen. Im Moment denke ich, dass etwas JavaScript (vor allem weil es ja um einen Datepicker und nicht um ein Navigations-Element geht) hier der elegantere Weg ist.
22.08.2014
phg 1,6k 3
Das Problem ist, dass ich das position:relative vom .breakout_anchor - Element brauche, damit sich das breakout_element daran orientieren kann um mitzuscrollen. Mein konkretes Layout kann ich leider nicht hier reinstellen, ich kann auch nicht jederzeit sicherzustellen, dass sich der Date-Picker nicht innerhalb eines relativ positionierten Containers befindet. Den JS-Weg bin ich schon auch bereit zu gehen, da ja für die SPA sowieso JS eine Grundvoraussetzung ist. Dazu hab ich aber dieses Problem: http://codekicker.de/fragen/Scroll-Event-beliebigen-Parent-Elements-reagieren
Smartin 22.08.2014
1
Ok, ich hab mich mal mit deiner anderen Frage befasst und dort eine Antwort verfasst.
phg 24.08.2014

Stelle deine Css-Frage jetzt!