Comments (9)
Got it, will be fixed later. Thank you!
from playground-macos.
Hmmm it seems harder than I thought. Before making the dropdown menu always overlay windows, I have to limit the movement boundary of windows below topbar, or the ui will seem strange. However, I use react-rnd for dragging and resizing windows and it's not easy to set boundaries in react-rnd...
I'll try to find out a solution but this issue may not be solved immediately. (Also, pull requests are welcome
from playground-macos.
I recommend looking for something to overlay the dropdown so that it is always rendered on top of things at a fixed positive.
https://www.npmjs.com/package/react-overlays comes to mind but might not be the right solution.
Is this what you tried?
from playground-macos.
I try to set z-index of the dropdown menu and the top toolbar (the div of dropdown menu), it seems to work well. In my opinion, the z-index of top toolbar and the dropdown menu should be the max of the page so that it can always show over other element.
from playground-macos.
I try to set z-index of the dropdown menu and the top toolbar (the div of dropdown menu), it seems to work well. In my opinion, the z-index of top toolbar and the dropdown menu should be the max of the page so that it can always show over other element.
That's right. However, in that way, when dragging the window to the top of the screen, it will be overlapped by the topbar, which seems weird:
So I guess I should limit the movement boundary of windows below the topbar (red line), but it's seems not easy in react-rnd...
from playground-macos.
I try to set z-index of the dropdown menu and the top toolbar (the div of dropdown menu), it seems to work well. In my opinion, the z-index of top toolbar and the dropdown menu should be the max of the page so that it can always show over other element.
That's right. However, in that way, when dragging the window to the top of the screen, it will be overlapped by the topbar, which seems weird:
So I guess I should limit the movement boundary of windows below the topbar (red line), but it's seems not easy in react-rnd...
I never use react before(always using vue), so it maybe hard to change the code directly and properly for me. I just read the doc of react-rnd and I understand the question is to ensure that the x and y of the window do not extend beyond the desktop area. And I find that the problem can be solved with putting the rnd in a div. I try to write a example. Hope it can help you deal with this issue.
from playground-macos.
I just read the doc of react-rnd and I understand the question is to ensure that the x and y of the window do not extend beyond the desktop area. And I find that the problem can be solved with putting the rnd in a div. I try to write a example. Hope it can help you deal with this issue.
@AXiLiYa Thank you for your detailed explanation and example. Yes, theoretically, movement boundaries can be set using div in react-rnd. But this would be difficult in practice in this case, because the size and position of the boundary div should adapt according to the window size. Here's a simple sketch:
For window1 (blue), the boundary div should be the blue box. But for window2 (another window, or resized window1), the boundary div transforms to the red box.
So in my opinion, this way is neither easy nor elegant. I guess it would be much easier if react-rnd provides a way to set bounds prop with a position object, just like what react-draggable (one of react-rnd's dependencies) does. I'll try to submit a pr to react-rnd when I have time (although I hope some others could do it hahaha
from playground-macos.
@mirkoRainer @AXiLiYa Hi, finally I took @AXiLiYa's advice and added a boundary for rnds via putting them in a parent div. In fact it's much easier than I thought hahaha. Now this problem should be solved, have a look at the website. Thank you!
from playground-macos.
Nice!
from playground-macos.
Related Issues (20)
- I just wanted to say how awesome this is HOT 2
- How to rename username in login screen? HOT 2
- 太酷了! HOT 6
- renaming the tab HOT 8
- [Not an issue] This is pure awesomeness! HOT 1
- Blocked Google Analytics Crashing Whole Page HOT 1
- How to change it's content to ours HOT 1
- app内文字模糊 HOT 8
- 请问登录页面能实现输入密码访问吗 HOT 2
- 无法打开示例页面 HOT 2
- Failed to compile 编译好像有点问题 HOT 2
- md渲染问题 HOT 8
- 2
- my issiue is how dope this is
- Not able to deploy to heroku or github pages HOT 1
- Index.html showing a blank page
- issue1
- Hi. Why not make a right-click menu
- 希望Launchpad内添加应用app而不仅是链接link
- Can't go deeper... HOT 1
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 playground-macos.