Sidebar: Fix positioning of popups (color/date picker, tooltips)
See original GitHub issueFeature Description
Currently, we only have color/date pickers in the right column of the editor and their positioning is not flexible (they always open on the left side of the input), so with the new Sidebar on the left side, the color picker opens out of the viewport area, I’ve introduced a temporary fix so the picker is at least visible but we need to change the positioning a bit. It was discussed on Slack and it should look like this:
Date picker case is easier, just the anchor point needs to change, right now it’s top/right, should be top/left:
https://github.com/GoogleForCreators/web-stories-wp/pull/10760#discussion_r818761362
PR should be based on/merged to the sidebar
branch.
Alternatives Considered
Additional Context
Issue Analytics
- State:
- Created 2 years ago
- Comments:7 (5 by maintainers)
Top Results From Across the Web
Controlling tooltips & pop-up menus with components in React
1. Open the tooltip · isOpen is for mounting and unmounting the tooltip component/JSX markup and · style is for positioning the tooltip...
Read more >Add smart/fixed positioning option for components with ...
Add smart/fixed positioning option for components with dropdowns/popups and for tooltips/popovers #4762. Open. 3 of 5 tasks.
Read more >New in 2.4
CSS tooltips even support inversion and specified positioning. ... then hitting it again "Colorado", even without using a search selection dropdown.
Read more >CSS sidebar with scrollbar with absolute tooltips
I'm really struggling with this one to wrap my head around, I have a sidebar that in one of the list items is...
Read more >fomantic-ui/RELEASE-NOTES.md - UNPKG
28, - **Label** - Fixed image position/size in labels within menu items ... 160, - **Popup** - Add size and basic variation to...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Yes, I’ve added a proper description that shows the correct positioning.
Fixed via #10883