Comments (9)
If an element, a popover for example, does not fit on screen in it's defined position:
Flip the orientation (top-left becomes bottom-left, right-bottom becomes left-bottom)
If said element still does not fit:place in original position and resize, vertical or horizontal, to fit on screen.
If element still does not fit and cannot be resized:place element offscreen. Layout/app has to handle this?
I think this is a good starting point.
The current popover already has some logic that will adjust it's position, but in regards to the whole body, not the viewport. It's not resizing the element but moving it, see the "Popover ( out of body )" stories"
Flipping positions can be very tricky, so this only would be ok with a limited amount of positions if we default to "render off screen" in case it doesn't fit into the screen.
My preferred solution would be to then be:
- Check provided position
- Check flipped position
- Depends on component:
- for the Popover:
Show the contents in a modal - for the tooltip:
Display the message a bit more prominently at the bottom/center of the viewport (similar to the alertbars)
- for the Popover:
No resizing or moving, using a Modal for the Popover will always work & using a message at the bottom of the screen for tooltips should also always work). Resizing & re-positioning is quite complicated, adds complexity (and therefore possible bugs) to the components and makes it a lot harder to maintain
from ui.
My preferred solution would be to then be:
1. Check provided position 2. Check flipped position 3. Depends on component: * for the Popover: Show the contents in a modal * for the tooltip: Display the message a bit more prominently at the bottom/center of the viewport (similar to the alertbars)
No resizing or moving, using a Modal for the Popover will always work & using a message at the bottom of the screen for tooltips should also always work). Resizing & re-positioning is quite complicated, adds complexity (and therefore possible bugs) to the components and makes it a lot harder to maintain
I recognize that this solve the issue of 'what to do with elements that don't fit', but I think this would be a confusing user experience. Content would present differently depending on scroll position, but how is a user to understand that? Also, popover
vs. modal
is not only a matter of visual presentaton. Modal
is intended to interrupt a flow, is is therefore reserved for actions/info that needs to break a user flow and be dealt with. A popover
is intended for the exact opposite, providing info inline without breaking flow. I think mixing between these based on screen size/position would result in a fragmented, difficult to understand user experience. The same applies to switching between a tooltip
and an alert bar
.
I think the better solution would be to display the element that doesn't fit offscreen. For example, a huge popover that doesn't fit on either axis of the body/viewport would have to get internal scrollbars. This is not ideal at all, but having this much content would also break our design and usage guidelines for the use of a popover, so it will never be ideal.
Of course, it is important to keep in mind we are discussing edge cases here. Most tooltip
s, if used as intended, will fit on screen somewhere, for example.
Note: I've updated my post above with a clearer example of the 12 positions.
from ui.
Here are some illustrated examples of each scenario and the suggested behaviour to aid discussion.
Working as intended, space available
No space in intended position, using opposite position
No space in intended position, no space in opposite position, popover container not allowed to scroll. Body/app wrapper scrolls
No space in intended position, no space in opposite position, popover container allowed to scroll
*The principles above would also apply to horizontal scrolling.
from ui.
Is there a precedent for libraries flipping the intended position of a directional popup of there is no space? It seems counter intuitive to me for the user to specify a position, and then for us to not listen to that.
I've seen this kind of behaviour with dropdowns, but I don't think I've seen it happen when specifying a direction like you'd do with tooltips.
from ui.
Is there a precedent for libraries flipping the intended position of a directional popup of there is no space? It seems counter intuitive to me for the user to specify a position, and then for us to not listen to that.
I've seen this kind of behaviour with dropdowns, but I don't think I've seen it happen when specifying a direction like you'd do with tooltips.
True, this does possibly display differently than the intended position, but in the pursuit of the main goal which is: display this thing on screen. If we don't flip the position then it won't be on screen. So I guess it depends how important position is, whether it's a preference or a hard requirement.
I think allowing a no-flip
/no-reposition
or similar property would solve this for elements that need to be in a certain position. It would then be up to the implementer to decide 'is the position so important that it should be placed off-screen, even when other space/positions are available?'
from ui.
For reference, I have also worked on a project that used this library: https://popper.js.org/ , which also includes 'flip' functionality.
from ui.
Yeah, I think it's important to signal clearly to the user that it might display in a different direction. A noFlip
or noReposition
toggle would be a clear way to indicate that. I think I'd prefer calling the direction preferredDirection
, so that everyone specifying a direction knows that it's preferred, not strict. Something in that direction?
from ui.
Draft specs for components that need a position utility: dhis2/ui-core#522
from ui.
Hi! Due to a lack of activity on this issue over time it seems to be stale. If still relevant, please provide information that moves it forward: e.g. more information, reason to keep it open, supply a pull request, etc.
Any activity will keep it open, otherwise it will be closed automatically. Thanks! 🤖
from ui.
Related Issues (20)
- The automated release is failing 🚨 HOT 1
- Library-wide minimum accessibility standard for all components
- FlyoutMenu inside a Popover: a double border is shown HOT 1
- FlyoutMenu with a disabled MenuItem requires onClick HOT 1
- Transfer: onEndReached not triggered if an item is selected HOT 4
- Hovering over a SingleSelectField's label gives a console warning HOT 1
- OrganisationUnitTree: Alphabetical sorting HOT 1
- Content of disabled buttons is not as legible due to decreased opacity HOT 4
- Enabled textfields don't have a white background HOT 2
- Infinite scrolling improvements HOT 1
- Translation error HOT 1
- Scrollbar showing in select at certain zoom levels HOT 2
- Label and field typography adjustments
- Disabled toggle styles only affects text labels HOT 1
- Simplify button styles HOT 1
- 100% cpu usage with certain use of the alertstack/alertbar HOT 3
- Only add icon to the first button in SplitButton HOT 1
- test HOT 1
- Tabs component DX is not consistent with Select/Transfer HOT 2
- The automated release is failing 🚨
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ui.