City Page Quirk

This is another ‘bug’ in the strictest sense, IMHO, but not worth more than a few minutes’ effort when there is little or nothing else to do. It is useable and workaround-able as-is.

On the single municipality page (https://citystrides.com/users/NN/cities/MM),
the left panel uses horizontal window real-estate for a vertical scrollbar, but it is dysfunctional, instead having that panel’s scrollbar on the far right of the window on the opposite side of the map itself. I think some adept web design programmer should help James identify the CSS necessary to eliminate the right scrollbar in favor of making the left scrollbar work as someone originally seems to have imagined.

To be sure I understand, and that I’m not missing something that is only present in other platforms, you’re suggesting that the scroll bar in the image below be moved to the left so it sits next to the left column content?
That’s the only scrollbar (barely) in my view, but I think other platforms are a bit … enthusiastic about scrollbars.

Yes. Observe the little down ‘carat’ a short bit left of the ‘Route-builder’ button and the column of blue below it and immediately to the right of the ‘Go’ buttons - also immediately to the left of the map. That appears to be the intended scrollbar for the left panel but it doesn’t respond to any clicks. Its entirely functional as is, but not at all intuitive that the left panel of stats would scroll by a scrollbar on the opposite side of the map. Does that disambiguate what I was pointing out?

Just for completeness, I use the Edge browser normally, but I see the same thing with Firefox.

Oh, yeah, there was no intention of placing a scrollbar in that area of the page. That area of the page is just padded - similar to the far left spacing.
I more or less don’t think of scrollbars at all while building/using the site. I think it gets placed in the far right of the overall page based on how I have everything laid out … The “full page” consists of the entirety of the text content & I force the map to be statically placed there as full height and some percentage width.
You’re probably right that there’s a better CSS structure for this that would allow the content to exist in its own space separate from the map. That would end up including the scrollbar in its more logical placement.
One thing to keep in mind for that redesign is that the mobile view uses the same HTML structure, and places the map statically on top with the page contents scrolling below. :sweat_smile:

2 Likes

Always your call. :+1: Thanks for taking a few minutes to look.