Made the form overflow instead of whole page #1404
Conversation
|
Deployed to https://test-deployment-pr-1404.herokuapp.com/ |
|
Kudos, SonarCloud Quality Gate passed!
|
There was a problem hiding this comment.
tested this in various screen sizes and it seems to work reliably. Thanks, this is a big UX improvement! 🎉
only on mobile there is a slight glitch - the component is still too long and scrolling to the very bottom, the title (name of beneficiary above the tabs) gets scrolled out. This is not a huge issue, though.
| @@ -21,6 +21,9 @@ $max-screen-width: $min-block-width + $margin-main-view-right + $margin-main-vie | |||
| .columns-wrapper { | |||
| @include adaptive-grid($min-block-width, $max-screen-width); | |||
| align-items: start; | |||
| position: relative; | |||
| height: calc(100vh - 240px); | |||
There was a problem hiding this comment.
because the 240px depend on the space taken up by our heading of the view above, this will stop working (i.e. start showing a second scroll bar) when we change things about other components outside of this.
The idea of CSS certainly is to lay out things well stacked and use relative measures ... but with all our components inside each other this is a huge pain in the a**. So let's go with this for now 😉
There was a problem hiding this comment.
@Schottkyc137 should we consider reworking things from the root inwards, so that the overall views always exactly fill the screen and inside components like this one take up relative space and display their own scrolling?
There was a problem hiding this comment.
@Schottkyc137 should we consider reworking things from the root inwards, so that the overall views always exactly fill the screen and inside components like this one take up relative space and display their own scrolling?
At some point, I think that this is the way to go. That being said, our large HTML tree certainly complicates this (because a lot of elements need to have their height set appropriately) but in the end, it might be worth it.
|
🎉 This PR is included in version 3.9.1-master.2 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
|
🎉 This PR is included in version 3.9.1 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
see issue: #1374