[GamingDude]

Hallo zusammen,

bin neu hier, habe allerdings schon - für meine Begriffe - mittelmäßige CSS-Vorkenntnisse.
Nur für dieses Problem habe ich bisher noch keine Lösung gefunden und hoffe hier auf Hilfe.

Es geht um ein Textfeld, welches bei Eingabe durch den Benutzer eine Auto-Complete-Liste vorschlägt. Eben diese erzeugte Liste wird in einem durch CSS formatierten Span-Element unter dem eigentlichen Eingabefeld ausgegeben. Zugewiesen wurde ihr dem Element padding von rundum 3 Pixeln.

Hier der CSS-Code:

.autofill {
    position: absolute; 
    background: #e5e5e5;
    border: 1px solid #ccc;
    padding: 3px 3px 3px 3px;
}

Hier das formatierte Element:

<input id="input" type="text" value="" onkeyup="load()" name="suche" autocomplete="off" size="25"><br /><span id="Daten" class="autofill"><!-- hier steht dann der Autofill Content --></span>

Das Problem ist allerdings, dass man vor der Eingabe in das Textfeld schon einen kleinen Kasten unter dem Textfeld sehen kann (bedingt durch das Padding), der eben genauso formatiert ist (Background, Border, etc.) wie die spätere Liste bei Eingabe durch den Benutzer. Das sieht unschön aus. Anbei auch ein Screenshot, den ein Bild sagt ja bekanntlich mehr als 1000 Wörter.

Gibt es eine Möglichkeit das Span-Element ohne Inhalt irgendwie auszublenden? Und dass es erst angezeigt wird, sobald der erste Buchstabe eingegeben wird?

Habe schon ein paar Sachen probiert, um das Problem zu beheben, allerdings ohne Erfolg. Hoffe hier auf Hilfe!

[Thielo]

Ist natürlich immer die Frage WAS du ausprobiert hast. Ein simples display: none; sollte aber das Problem lösen.

[GamingDude]

Danke für die Antwort!
Mit display habe ich schon gearbeitet und auch mit visibility, jedoch ohne Erfolg.
Das kleine Kästchen unter dem Textfeld ist dann zwar verschwunden, allerdings geht die Liste dann aber auch nicht auf, sobald man anfängt, die ersten Buchstaben einzugeben.
Das ist ja das Problem. Solange das Textfeld leer ist, sollte dass Kästchen nicht zu sehen sein, gibt man etwas ein, soll die Liste wie gewohnt aufspringen.

Lässt sich das überhaupt per CSS regeln, oder riecht es hier schon eher nach Java(script)?

Lg

[fricca]

Anhand von Codeschnipseln kann man nicht beurteilen, was möglich ist und was nicht.
Poste bitte einen Link zum Problem, siehe auch unsere Hinweise für Fragende.

[Thielo]

Zitat von GamingDude

Lässt sich das überhaupt per CSS regeln, oder riecht es hier schon eher nach Java(script)?

Hm lass mich kurz überlegen: Du änderst etwas über JavaScript.... JA, es ist ein Fall für JavaScript.