Make pod-tables scroll horizontally on smaller views #2260
Merged
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
If a table is too wide for a page a horizontal scroll bar will be added to the bottom. If the page is focused, the right key will scroll right and left to come back. I'm presuming this will work on mobile with finger dragging, but no testing set up for that at the moment. Reverted a previous commit doing this, and this should now work.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
If a table is too wide for a page a horizontal scroll bar will be added to the bottom.
If the page is focused, the right key will scroll right and left to come back.
I'm presuming this will work on mobile with finger dragging, but no testing set up for that at the moment.
Reverted a previous commit doing this, and this should now work. 'nowrap' was causing the problem which is not in this commit.
The Problem
Squished table cells on mobile #650
Table columns that are outside the viewport are not viewable. Problem on mobile. This occurs in the bug report and is also in the 'Routines' page, directly linkable from the front page of the site making the bug quite prominent.
The Solution
Add css via sass generator following advice from someone's question on stackoverflow (https://stackoverflow.com/questions/5533636/add-horizontal-scrollbar-to-html-table) on best way for creating scrollable table.