Question

I need to do some design tweaks in my web application. Here is the sample feature

You can see the black movable box. Go to the TEXT section and type some text in it. Simultaneously you can see it on the top of the page. So the problem here is that you can see the box somewhat moving slightly to bottom when the text is typed on the field. That should not happen, how can I control it? I tried using position: relative on the #text-preview, but no use.

I’m using some other features like font size slider which I can’t show in the jsfiddle, so if the slider moves the font size increases and the box is moving from top to bottom and vice-versa according to the text size which is not good.

So how can I control the box to not move when performing some actions in it?

Answer 1

You could write something like this:

<div id="name-preview" style="position: absolute;">
    <p id="np"></p>
</div>