Habitica: Opening Edit modal causes task columns to widen

Created on 15 Feb 2017 · 9Comments · Source: HabitRPG/habitica

General Info

UUID: 8cce502f-a91c-40c2-b782-687759c6da0a
Browser: Firefox 51.0.1 (64-bit)
OS: Ubuntu 16.10

Posted in Report a Bug guild and directed by @Alys to post here. Every time I edit a task, the Habits column widens, causing the other columns to shift to the right. After I exit the edit modal, the width changes back.

My current screen resolution is 1366x768 and my browser window is maximized, but I've tested this using other window sizes, as well as on Windows through Chrome using both my husband's laptop (higher resolution) and my work computer (even higher), and the same issue occurs.

Screenshot gif here: http://imgur.com/a/M413Y (note how the Habits column width widens and how the right edge of the Rewards column gets closer to the scrollbar).

EDIT: Now that I take another look, it seems like all the columns are widening since the right edge of the Habits column shifts a lot less than the right edge of the Rewards column (the Habits column was just the most noticeable since the left edge did not move).

minor status on hold

Source

mandyzhou

All 9 comments

If set the <body> overflow:auto.I can fix it easily.

and set .modal overflow:auto,it looks good.

But the page height is too short, there will be two scroll bars

EYHN on 20 Feb 2017

👍1

Just as an update, it looks like this is happening for all modals I've encountered, not just the Edit modal.

mandyzhou on 20 Feb 2017

👍1

When a modal is turned on,the body's scroll bar is hidden

EYHN on 20 Feb 2017

👍1

This is kind of a tricky one. The body scrollbar is purposefully being hidden when the modal is open in order to avoid the double-scrollbar issue. This is causing the responsive design to widen to the new width.

One option is to permanently remove the body scrollbar and add another one somewhere else in the main app window. This is made a little tricky by the fixed positioning of the navbar and headers. One quick-and-dirty approach is to:

Change the body to overflow:hidden.
Remove the top padding from the header-wrap div (which is being used to push it under the navbar).
Add a top margin to the ng-scope div that is the same as the previous header-wrap padding. Then change the ng-scope height to 100% and add overflow:scroll.

This results in a main window that looks like this, with the scrollbar being positioned just underneath the navbar:

habitica_8490-1

Here's what it looks like with an open modal:

habitica_8490-2

The columns do not widen because there are still two scrollbars here, but the modal scrollbar is overlapping the main window scrollbar since neither are attached to the body element.

This is just an example done with the Firefox DOM inspector; I'd have to spend some time looking through the code to see how to implement this in a proper way.

beejunk on 26 Feb 2017

I fiddled around with this a bit, and my previous suggestion does not work very well. It causes odd visual artifacts when loading, and requires a few additional fixes to work with smaller screens. It also pushes the footer off the bottom of the screen in a way that's not so straightforward to work around.

EDIT: It also caused the party header to scroll off the window, so definitely a no go.

beejunk on 27 Feb 2017

Client issue. Putting on hold until after the redesign.

SabreCat on 26 Jul 2017

This doesn't happen anymore, as far as I can tell, so should it be closed?

librarianmage on 20 Oct 2017

Yup! Thanks for doing this old-issue hunting, btw @MathWhiz, much appreciated!

SabreCat on 20 Oct 2017

No problem! With such a large core base being around so long, it's easy for
stuff to sink to the bottom.
On Fri, Oct 20, 2017 at 2:52 PM Sabe Jones notifications@github.com wrote:

Yup! Thanks for doing this old-issue hunting, btw @MathWhiz
https://github.com/mathwhiz, much appreciated!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/HabitRPG/habitica/issues/8490#issuecomment-338306347,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ALz_83dR9BnVw6Ed2PCRhPC8K-mRSBv_ks5suPn0gaJpZM4MBtIx
.