Search code examples
csspositioning

CSS: Element Being Pushed Down

I have an issue where when the user inputs text into the textfield, the JavaScript that dynamically displays and writes how many chars he/she has left keeps pushing the wrapper that contains the button/links elements down a certain number of units. I want the button wrapper to stay fixed and not move when the JavaScript does it's thing. The screenshots below illustrate what is happening.

BEFORE

alt text

AFTER

alt text

Any general suggestions as to how you prevent this?

Solution

  • I don't know how you add the text below the textbox but you could give the element an initial visibility value of hidden. It won't be shown but it will occupy space.

    Update:

    DEMO

    You might not even need to hide the element beforehand. If you give it a fixed height and it is empty by default, it works as well.