Dropdown-Container abgeschnitten

  • Hallo zusammen,


    ich habe nun meine neue Reiseseite (preiswerterbuchen.de/test/) fast fertig und stehe vor zwei Problemen:


    1. Der Dropdown-Container für den Reisezeitraum öffnet nach oben und ist dadurch abgeschnitten. Ein Öffnen nach unten würde das Problem schon lösen.

    2. Bei den Reiseteilnehmern öffnet der Container richtig nach unten, aber liegt nicht über dem Container darunter. Habe schon etliche Varianten mit z-index probiert, leider ohne Erfolg.


    Weiß jemand Rat?


    Viele Grüße

    Rainer

  • Ich tippe mal. dass Arne und ich größere Bildschirme haben, da klappt es nach unten auf. Aber sobald ich die Entwicklertools von Firefox anzeigen lasse (habe ich bei mit unten ausgerichtet) dann geht's nach oben.

  • Also zu deinem Problem Nr. 2 könnte dir folgender CSS Code helfen:

    Code
    div.fusion-fullwidth:nth-child(1) {
      z-index: 20;
    }

    Und dein Problem Nr. 1.. ja - nein - weiß nicht

    Das sieht mir nach so einem Wordpress Plugin JavaScript Problem aus. Da solltest du dich an den Entwickler dieses Date-Pickers wenden.

    Irgendwie wird der zugehörige Container im Code ganz unten eingefügt und dann mit 'position: absolute' irgendwie nach oben 'gemogelt!

    Kurzfristig (leider nicht responsive) könnte man das für größere Displays so anpassen:

    CSS
    .flatpickr-calendar {
      top: 265px !important;
    }

    Aber eine Lösung ist das nicht :(! ... nur ein Notbehelf.

  • Hallo Sailor,


    erstmal herzlichen Dank! Problem 2 ist schon gelöst. ;-))

    Ich sitze da tagelang vor und bei Dir dauerts ein paar Minuten. Perfekt!!!


    gegen das Problem 1 haben ich Deinen Code eingefügt und es funktioniert zumindest auf meinem Notebook. Mobil wir sowieso ein anderer Kalender genommen. Kann dann noch nun ein Problem in der Darstellung auftauchen?

  • Ich kann das nicht mit Sicherheit beantworten... diese WordPress Seiten - und dort vor allem die JavaScript Geschichten - sind nicht so ganz meine Welt. Aber wenn mit dem Date-Picker noch Probleme auftauchen, dann am ehesten, dass die Position wieder 'unpassend' wird wenn sich die Displaygröße ändert.

  • Ich habe es jetzt noch auf dem Desktop und auf dem Tablet getestet. Auch dort kann ich keine fehlerhafte Dartstellung mehr erkennen.

    Also bezeichne ich das Problem mal als gelöst, es sei denn, jemand sieht noch einen Darstellungsfehler. Dann wäre ich für eine kurze Rückmeldung dankbar.


    Apropos Darstellung: Wenn ich schon eine Profi da habe, bin ich mal so dreist und schiebe noch eine kleine Frage nach: Wenn ich in der Datenbank auf "Suchen" klicke, öffnet sich das Ergebnisfenster korrekt. Nur öffnet es nicht ganz oben, sondern ein wenig tiefer, trotzdem scroll to 0,0 hinterlegt ist.

  • Hmmm... da muss ich jetzt passen :(! Bei Fehlern(?), die ich nicht auf meinem Rechner sehen und analysieren kann, kann ich leider keine Hilfe zur Fehlerbehebung geben.

    Ich gehe aber davon aus, dass der Fehler irgendwo bei dir zu suchen ist, denn sonst würde ich und andere es ja auch sehen können.

  • Guten Morgen Sailor,


    ich bin gestern extra zu einem Bekannten gefahren, um es mir dort anzuschauen. Genau der selbe Fehler: Es bleibt minimal scrollbar.


    Aber mit diesem Fehler kann ich gut leben. ;-))


    Nochmals vielen, vielen Dank für Deine Hilfe.

  • Nun muss ich mich leider doch nochmal melden, da ich über einen weiteren Fehler gestolpert bin und den ganzen Morgen keine Lösung finde.


    Wenn ich in der Suchmaske nichts eingebe, wird "undefined2Erw" an die Datenbank übergeben. Genauso passiert es, wenn ich zum Beispiel zwei Kinder im Alter von je 6 Jahren zusätzlich wähle, es wird also "undefined2Erw/6k/6k/" übergeben und dadurch nicht in der Datenbank berücksichtigt.


    Wenn ich nun allerdings neben den Kindern auch einen Abflughafen eingebe, verschwindet das undefined und der korrekte Wert wir übergeben.


    Ich weiß nicht, woran es liegt.


    Hat jemand einen Tipp?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!