CODEWITHSUNDEEP
jqueryhtmlcss
rnk
rnk

Reputation: 2204

using position relative

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?

Upvotes: 3

Views: 108

Answers (2)

SupremeDud
SupremeDud

Reputation: 1411

If you add float:left to #text-preview then it will stay put

Example

Upvotes: 0

Johannes Klauß
Johannes Klauß

Reputation: 11020

You could write something like this:

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

Upvotes: 2

Related Questions