1

I work as a front-end developer and I keep getting bugs filed by a UI Designer who says that 2 of my elements are slightly misaligned and need to match the mockup more closely. I've looked at my page a million ways and I can't see how anyone could claim that these 2 boxes aren't perfectly aligned. I've looked in Inspect Element and there are perfect horizontal lines through the tops and bottoms of the boxes. I want some way of "proving" this, though. So I want something like 

function( var id1, var id2 )
{
    /* id1, id2: identifiers of the 2 divs */

    /* .... */ 
}

to print something like

vertical position of top and bottom of first div: 162px, 180px
vertical position of top and bottom of second div: 162px, 180px

to the console, where the pixels are the absolute position with respect to the whole page (or the body, I suppose). Is this possible, and if so, how do I implement it?

Depak Chopra
  • 307
  • 2
  • 6
  • 2
    Why not just look at the page via the developer tools DOM inspector and check the "Layout" tab? Chrome and Firefox/Firebug already do exactly what you want. – Pointy Apr 15 '15 at 19:57
  • http://stackoverflow.com/a/11396681/4028085 – brso05 Apr 15 '15 at 19:59
  • 3
    Why not just send a photoshop with a screenshot of the page and a pixel perfect guide on the elements. I think a designer will rather "believe" a ps file than some printed code. – Andy Apr 15 '15 at 20:01
  • It's very likely that both you and the UI designer are correct. Rather than arguing with the designer, have them send you a screencapture. – Kevin B Apr 15 '15 at 20:12

1 Answers1

4

You will be wasting your time if all you have to go off of is a description of "slightly misaligned".

Politely ask the UI Designer to provide a screenshot of the issue they are seeing.

Additional information that will be helpful is:

  1. Operating System / Version
  2. Browser / Version
  3. Device / Resolution
  4. Browser addons
  5. Browser settings that are not default

It is most likely that you are both seeing different things and if you cannot reproduce it, you cannot fix it. It is important for you to mimic their environment as closely as possible.

Now, if for some reason they cannot provide a screenshot and if you do want go down the route of proving what you see is correct and they are not (which is not a good use of time) you can use the following JavaScript to get the pixel coordinates of your elements on the screen.

var myElem = document.getElementById('id1').getBoundingClientRect(); console.log(myElem.top, myElem.right, myElem.bottom, myElem.left);

The values returned by element.getBoundingClientRect() are relative to the viewport.

xengravity
  • 3,501
  • 18
  • 27