This repository has been archived by the owner on Aug 19, 2022. It is now read-only.
GlassCase horizontal alignment #20
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Flexbox containers with fixed-width content and `overflow-x: auto; justify-content: center` get cut off on the left side when the content is wider than the container. Moving the `w-100` and `justify-content-center` classes to a wrapper `<div>` allows the scrollbar to reach all of the content.
The GlassCase element was always initially centered before commit cb12ae8. Scroll the element to the center on render to preserve the original look, while allowing all child elements to be seen.
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
I updated the
GlassCaseReactElement template and Tailwind classes to allow the element to be scrolled all the way to the left. I added JavaScript to scroll the content to the center to retain the look achieved by the previous version.Why?
The
GlassCaseReactElement is used on the homepage to feature mailing examples (Cartoons, Quotes, Special, Beautiful, Fun). It cannot be scrolled all the way to the left if its content is wider than the viewport, so the first 1-2 examples are not accessible to users with narrow viewports.How?
I improved the scrolling by wrapping the container in a parent flexbox container, and moving the width and center justification styling to the parent flexbox. This way, the center justification does not interfere with the overflow styling.
I added a JavaScript function with
useEffectto initially scroll the content to the center when the element is rendered.Other thoughts
I'm not sure if the original intention was for the content to be initially centered on narrow viewports (i.e. for the "Special" mailing to be initially more prominent than the "Cartoons" mailing). If this is not the intention, the JavaScript may not be necessary, and commit d408d33 could be reverted.
Screenshots
Before these updates, the component is centered but cannot scroll any further to the left. The first 1-2 elements are not accessible (depending on viewport width):
With these updates, the component starts in the same centered position, but you can scroll all the way to the left: