Currently, the scrollbar visibility toggles on and off when the contextual menu is opened or closed. This behavior causes a shift in the layout, which may negatively affect the user experience.
Figure out where this extra outer scrollbar has come from and remove it!
Fix.
| Comment | File | Size | Author |
|---|---|---|---|
| #13 | announce_js.png | 785.54 KB | jessebaker |
| #11 | scrolbar.png | 452.14 KB | jessebaker |
| #6 | contextual menu-1.gif | 593.66 KB | omkar-pd |
| contexual-menu.gif | 754.5 KB | omkar-pd |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
omkar-pd commentedComment #3
shyam_bhattComment #5
shyam_bhattComment #6
omkar-pd commentedTestest the changes. If we move the cursor away a bit from the menu the menu closes.
Comment #7
omkar-pd commentedComment #8
shyam_bhattComment #9
jessebaker commented@omkar-pd I don't think that scrollbar on the right should be there at all! Is the screenshot taken on Windows?
Comment #10
omkar-pd commented@jessebaker No, I'm using Ubuntu.
Comment #11
jessebaker commentedUpdated the Proposed resolution in the issue summary.
Comment #12
shyam_bhattComment #13
jessebaker commented@shyam_bhatt You're code change does seem to resolve the issue, but I fear it is just treating a symptom and not addressing the cause.
This issue seems to have been introduced in https://www.drupal.org/project/experience_builder/issues/3454173
The addition of
- system/basein experience_builder.libraries.yml means the /xb page is now loading extra JS libraries. One of which is announce.js. The code in announce.js add a new div to the page at the bottom of the body with a height/width of 1px that sits below the experience builder div and is what is causing the scrollbar.Assigning to @bnjmnm to take a look.
Comment #14
jessebaker commentedDiscussed with @bnjmnm - the announce div is included as part of a longer term plan to improve a11y so it's correct that we are loading it on the page. For now I'm going to just set the body to have overflow: hidden and be done with it.
Comment #15
jessebaker commentedThanks all. I've merged a fix. I also verified that (at least on MacOS) the fix does not prevent a11y screen readers from working with the announce.js functionality
Comment #17
jessebaker commentedComment #18
omkar-pd commented@jessebaker, I think you forgot to save credits. 😶
Comment #19
kristen polCrediting contributors.