CSS: Element wird heruntergeschoben

Question

Ich habe ein Problem, bei dem, wenn der Benutzer Text in das Textfeld eingibt, das JavaScript, das dynamisch anzeigt und schreibt, wieviele Zeichen er/sie übrig hat, den Wrapper mit den button/links-Elementen nach unten drückt eine bestimmte Anzahl von Einheiten. Ich möchte, dass der Button-Wrapper fest bleibt und sich nicht bewegt, wenn das JavaScript so ist. Die folgenden Screenshots zeigen, was passiert.

VOR

NACH

Jede allgemeine Vorschläge, wie Sie dies zu verhindern?

Answer 1

Ich weiß nicht, wie Sie den Text unter dem Textfeld hinzufügen, aber Sie könnten dem Element einen ursprünglichen visibility Wert von hidden geben. Es wird nicht gezeigt, aber es wird Platz einnehmen.

Update:

DEMO

Sie könnten nicht einmal vorher das Element zu verstecken brauchen. Wenn Sie eine feste Höhe angeben und diese standardmäßig leer ist, funktioniert sie auch.

Answer 2

Die Beschriftung auf position: absolute setzen.
Dies wird dazu führen, dass die Layout-Engine den von ihr belegten Speicherplatz ignoriert.

Alternativ können Sie ihn auf visibility: hidden einstellen, wenn er nicht verwendet wird.
Dies wird dazu führen, dass es immer Platz belegt, auch wenn es versteckt ist.
Sie können Ihr Layout dann anpassen, um es passend zu machen.

Answer 3

Positionieren Sie die Zeichen links Text absolut.

Answer 4

Ich sehe zwei geradeaus Möglichkeiten dies zu tun:

1. Geben Sie eine feste Größe für das Element, das die Nachricht oder das Element enthält, das Feld und die Nachricht enthalten wird, so gibt es Raum für die Nachricht von Anfang an.

2. Verwenden Sie die absolute Positionierung für die Nachricht, sodass sie keine anderen Elemente beeinflusst.