Liste scrollbar machen

[flora]

Hallo zusammen!

ich hoffe ich bin richtig hier und es kann mir jemand weiterhelfen. Ich betreibe eine Webseite mit Pflanzenfotos, hier der Link:

http://flora.lefnaer.com/cgi-bin/photosearch.pl?action=SPECIES;name=Carex acutiformis

Ich habe den Header (Zeile 88ff im Quelltext) per CSS auf position="fixed" gesetzt (Z. 15), damit die Leiste oben immer sichtbar und erreichbar ist. In dieser Leiste gibt es ein Suchfeld (Z. 129): gibt man z.B. "C" ein, werden alle Arten deren Namen mit "C" beginnt aufgelistet. Die Liste ist zwar länger als das Browserfenster, aber es ist möglich hinunterzuscrollen und auch die letzten Einträge auszuwählen. Zudem gibt es eine zweite Liste (Z. 91ff) nur für die jeweilige Gattung, die angezeigt wird, wenn man mit der Maus über das Lupensymbol fährt. Diese Liste scheint die fixe Position des Headers zu erben und es ist daher nicht möglich die untersten Einträge zu erreichen, wenn die Liste länger als das Browserfenster ist. Dann werden die unteresten Einträge abgeschnitten und können nicht ausgewählt werden.

Ich habe alles mögliche probiert die zweite Liste irgendwie scrollbar zu machen, kenne mich aber mit CSS nicht wirklich aus und komme daher nicht weiter. Hat jemand einen Tipp, wie das gehen könnte? Im Idealfall sollte sie mit dem Body mitscrollen, so wie das auch mit der ersten Liste funktioniert.

Schöne Grüße Stefan

[Matthias Apsel]

Hallo flora,

für die Liste zum Beispiel max-height: 80vh und overflow: auto setzen.

Bis demnächst
Matthias

[Rolf B]

Hallo flora,

mit dem Body mitscrollen wäre nicht unbedingt sinnvoll, diese Autocomplete-Liste muss eigenständig scrollen.

CSS Regel, wie von Matthias angedeutet:

.ui-autocomplete {
   max-height: 80vh;
   overflow-y: scroll;
}

Das sollte reichen. Bei großen Fonts oder großen Zoom-Stufen mag die 80vh-Angabe dazu führen, dass man nicht alles sieht. Ich habe mal mit

max-height: calc(100vh - 1em - 20px):

experimentiert, das funktioniert besser, ist dann aber auf die Position des Suchfeldes oben fixiert und auch auf einige Margins/Paddings, die Du setzt. So richtig generisch responsiv ist es noch nicht, aber eine spezielle Mobilansicht (bzw. Ansicht für kleine Viewports) hast Du ohnehin nicht...

Rolf

[Matthias Apsel]

Hallo Rolf B,

aber schon auto statt scroll, damit die Scrollbalken nur bei Bedarf erscheinen.

Bis demnächst
Matthias

[flora]

Hallo Rolf und Matthias,

danke vielmals, ihr habt mir sehr weitergeholfen!

Schöne Grüße Stefan