Grey Bar in Portfolio Modal (Chrome, Safari)

[kvncsy]

In the Portfolio section of the Agency theme, my browser is rendering a vertical grey bar about 20px wide to the right of the content. It shows up both in Chrome and Safari on my Mac but not on Chrome for iPhone. It even appears in the theme's Demo website.

In Chrome on a PC it's clear they grey bar is a vestigial scroll bar.

This problem is unique to the Grav theme as it does not appear in the demo pages for the Jekyll or Start Bootstrap versions of the Agency theme.

Here is the scroll bar artifact on a Mac: in Chrome and in Safari

and what it aught to look like from the Agency Jekyll demo.

[kvncsy]

Fixed it.

in agency.scss change line

.portfolio-modal .modal-body {
    overflow-y: scroll;
}

to

.portfolio-modal .modal-body {
    overflow-y: auto;
}

[OleVik]

This is because of the height of this element. If it exceeds its "natural" height, the default browser scrollbar will show up again with overflow-y: auto; also. That CSS basically says: Hide the scrollbar until the natural height is exceeded, then revert to scroll in the necessary direction. If you want to avoid it, you need to make sure that the element can increase its own height - and thus the height of the entire page - without being constrained.

[kvncsy]

Sure, but the initial problem is with overflow-y: scroll; set in the CSS of the default theme.

Even when the element is within its "natural height" the scroll bar appears. It's not necessary and looks terrible. With auto as a default it's nice and clean on the modal popup for most cases. At least is solves the problem in the template for me.