"X" in modal is not centered

[charlydsgn]

X doesn't look center to me.

[808loud]

Good eye. I found the reason for this. Fix coming shortly.

[808loud]

The fix broke the fixed positioning. I need to investigate further.

[808loud]

Related to #30

[808loud]

Setting a up a test branch, fixedX for further troubleshooting

[charlydsgn]

X is still not centered, but very close. It becomes obvious once you start scrolling. See relationship between the icon and the artwork. I measured it and only seems about 10-12px off.

[808loud]

I spent a good amount of time throughout this site build investigating and working on centering fixed content, so I'm gonna jot down some notes here for posterity's sake.

Centering a fixed element within a webpage requires breaking out of the page's default stacking context, and creating a new stacking context. Think of a stacking context like a transparent "canvas" within which elements are positioned according to CSS styles.

So to center a fixed element, create a new stacking context for the parent element (the row of nav buttons). Then set it's position to 50% from the left side of the screen, which places its left edge at the center of the screen. Then to get the content centered, transform the element -50% along the x-axis, which shifts it left 50% of the width of the element. At this point, the nav bar is centered on the page.

In addition, a modal window creates a new stacking context. This is so elements inside the modal window are positioned relative to the modal window, not to the webpage underneath it. It is also what enables us to scroll content inside a modal window.

The stacking context for a modal window includes the browser scroll bar, b/c it is a container with overflowing content and needs to be set to overflow-y: scroll in order to be scrollable. Therefore, an element positioned with the above strategy will be off by half of the browser's scroll bar (by default, scroll bars in the big 3 browsers are 17px wide).

I need to somehow counteract the fact that the modal window's width is full viewport (including the scrollbar).

Potential help: http://stackoverflow.com/questions/8409613/how-can-i-include-the-width-of-overflow-auto-scrollbars-in-a-dynamically-siz http://stackoverflow.com/questions/19960162/bootstrap-3-modal-fires-and-causes-page-to-shift-to-the-left-momentarily-brows https://github.com/twbs/bootstrap/issues/9855 https://github.com/twbs/bootstrap/issues/9855#issuecomment-30109204

[charlydsgn]

Hmm. Ok! Cool. Thanks for the explanation.

[808loud]

It was mostly for my own benefit, but I thought I'd share it publicly :wink:

[808loud]

Previous solution was a hacky fix that used percentage-based positioning to try to account for the scrollbar included in the calculated width of the window. That solution was pretty light on code (and performant), but it only looked right at a certain range of viewport widths.

The below solution is another hacky fix, but it uses pixel-based positioning to account for the scrollbar included in the calculated width of the window. This solution makes assumptions about scrollbar width and the width of the "X" button. It is also slightly less performant, as it requires JavaScript. The benefit is that it is pixel perfect. Tested in Chrome (Linux, Windows 7, Android), Firefox (Windows 7), and Safari (iOS8)

Hardcoded solution in https://github.com/808loud/charlie-portfolio/commit/eb57f5c894e9e604bd308572d244ee2df5b83569