When decreasing the browser window the position of the Labels is changed

Asked

Viewed 94 times

0

I created dynamically Labels with a certain position. The problem is that when I minimize the browser its position changes. How can I fix this?

    //creation labels
    var labeltemp = document.createElement("Label");
    labeltemp.style.left = x2-10;
    labeltemp.style.top = y2+5;  
    labeltemp.style.position='absolute';

    var number = document.createTextNode(number);
    labeltemp.appendChild(number);

    document.body.appendChild(labeltemp);

Example: http://jsfiddle.net/zy6nLcgL/2/

javascript
  • 2

    I didn’t quite understand the question and maybe the solution I will present does not solve your problem, but remember to add the measure when changing sizes and positions. labeltemp.style.left = x2-10 + "px"; labeltemp.style.top = y2+5 + "px";

  • Using "absolute" position always makes a good result difficult when resizing the browser window.

  • The Labels move out of the starting position. The position should be the same, but as the window gets smaller, it changes.

  • @akm so when you say "minimizo" you mean "I change the size of the window"? is that here in PT "minimizo" means close, put in the background. Then you must have position: fixed; or working with percentages. You have an example that you can set?

  • Exactly, when I resize the window.

  • Okay, so when the window changes size do you want to maintain exactly the same position? or do you want to maintain a proportionality between the Abels?

  • Set the size and position in percentage instead of pixels.

  • The example: http://jsfiddle.net/zy6nLcgL/2/ In this case I cannot show here the Bees in the right positions.

Show 3 more comments

2 answers

0

When Voce resizes the margin and/or padding is being readjusted. You can take the test using: * { margin: 0; padding: 0; }

Using position: Fixed; will fix for IE.

0


Using an element with position:Fixed its position is relative to window not to graph as you were expecting.

Fixed is used when you keep an element attached to a position, for example a header that will always stay at the top even when you scroll through the page.

Description of Fixed on MDN

I made an example in jsfiddle that is always in the expected position. http://jsfiddle.net/zy6nLcgL/12/

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.