Skip to content
This repository has been archived by the owner on Aug 23, 2018. It is now read-only.

Fix overflow and position CSS in Errors.elm #207

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

spencerwilson
Copy link

@spencerwilson spencerwilson commented Sep 29, 2016

This fixes #206 . The problem was twofold:

  1. The child div had a width that exceeds its parent, so it creates some new area of page that the parent doesn't (or rather can't) simply "auto-fill" to, resulting in partly white background. Fix: add overflow: auto to the parent, to bound the child within the parent.
  2. The leftmost content could be cut off. This is due to some rules of Flexbox that I don't fully understand, but I was clued in by this source to try adding margin-{left,right}: auto rules to the flex child. That sounds like it'd be redundant in the presence of the align-items: center rule, but they do have an effect, and they fix the issue.
  3. nit: There was a width: 100% rule on the outermost div, which was the inherited value anyway, so I removed it.

I found this explanation helpful throughout while debugging/making these changes.

I was unable to test this change locally due to the build instructions not being update to date for 0.17 (or rather, the expando branch that the build instructions have one checkout is not able to be elm-make'd), but making these changes by hand in current elm-reactor fixes the issues.

@process-bot
Copy link

Thanks for the pull request! Make sure it satisfies this checklist. My human colleagues will appreciate it!

Here is what to expect next, and if anyone wants to comment, keep these things in mind.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Errors.elm has invisible content on small viewports
3 participants