Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Dashboard] Remove vertical scrolling when maximizing panel #134257

Closed
Tracked by #144752
Heenawter opened this issue Jun 13, 2022 · 1 comment · Fixed by #145628
Closed
Tracked by #144752

[Dashboard] Remove vertical scrolling when maximizing panel #134257

Heenawter opened this issue Jun 13, 2022 · 1 comment · Fixed by #145628
Assignees
@cqliu1
Labels
Feature:Dashboard Dashboard related features impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. loe:medium Medium Level of Effort loe:needs-research This issue requires some research before it can be worked on or estimated Project:Dashboard Usability Related to the Dashboard Usability initiative Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas

Comments

@Heenawter
Copy link
Contributor

Related: #132751 #134071

Describe the feature:
Expanding a dashboard panel will often cause a vertical scroll bar, especially when the user has added controls - however, this goes against the intention of the expand feature as described by @ThomThomson:

the intention behind this design is that maximizing the panel should take up the remainder of the vertical space [..., so] there should never be a scroll bar in the maximized view, and we should do our best [...] to have the maximized section simply grow to fill the remainder of the space.

Therefore, we should adjust how the expand action works to ensure that a vertical scrollbar is never present when a panel is expanded.

Video of scrolling

Screen.Recording.2022-06-09.at.10.27.48.AM.mov
@Heenawter Heenawter added Feature:Dashboard Dashboard related features Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas loe:needs-research This issue requires some research before it can be worked on or estimated impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. labels Jun 13, 2022
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-presentation (Team:Presentation)

@Heenawter Heenawter mentioned this issue Jun 13, 2022
Closed
@Heenawter Heenawter mentioned this issue Jun 13, 2022
Closed
@ThomThomson ThomThomson mentioned this issue Sep 23, 2022
Closed
@ThomThomson ThomThomson added Project:Dashboard Usability Related to the Dashboard Usability initiative and removed triage_needed labels Nov 3, 2022
@cqliu1 cqliu1 mentioned this issue Nov 7, 2022
Closed
22 tasks
@cqliu1 cqliu1 added the loe:medium Medium Level of Effort label Jan 13, 2023
@cqliu1 cqliu1 mentioned this issue Jan 18, 2023
Closed
18 tasks
@cqliu1 cqliu1 mentioned this issue Feb 7, 2023
Merged
9 tasks
cqliu1 added a commit that referenced this issue Feb 9, 2023
@cqliu1 @kibanamachine
[Dashboard Usability] Moves scrollbar to panel section (#145628)
1f03570 
## Summary

Closes #145404.
Closes #134257.

Cloud deployment for testing:
https://kibana-pr-145628.kb.us-west2.gcp.elastic-cloud.com:9243
User: `elastic`
Password: `zuIno5Tuy4lVmhMwbt2C6NyY`

This moves the scrollbar from the entire app to only the panel section
of the dashboard app. The search/filter bar and editor toolbar will
remain at the top while controls and panels scroll. The controls
floating actions were extracted out into their own component for future
use for panel actions.

#### Before
![Nov-17-2022
12-53-43](https://user-images.githubusercontent.com/1697105/202557972-6963b9d3-4eb0-40a4-963d-19e16e652d95.gif)


#### After
![Nov-17-2022
12-41-29](https://user-images.githubusercontent.com/1697105/202557993-251a984e-8bce-4b50-94c7-a7a39410a624.gif)


### Checklist

Delete any items that are not applicable to this PR.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
@cqliu1 cqliu1 self-assigned this Feb 22, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@cqliu1 cqliu1

Labels
Feature:Dashboard Dashboard related features impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. loe:medium Medium Level of Effort loe:needs-research This issue requires some research before it can be worked on or estimated Project:Dashboard Usability Related to the Dashboard Usability initiative Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Dashboard Usability] Moves scrollbar to panel section cqliu1/kibana
5 participants
@nickpeihl @cqliu1 @Heenawter @ThomThomson @elasticmachine