Closed nidhi752 closed 2 weeks ago
please make video or photo of issue @nidhi752
i will assigned it to you ,
make sure you follow and star ⭐ repo
As you can see, the wigdet keeps disappearing. Please assign this issue to me under hackoctoberfest'24
Has this bug been raised before?
Description
I encountered an issue with the widgets on my local development environment (localhost:3000). Initially, they appear fixed in position as expected, but when I change them to floating, they unexpectedly move to random locations across the page instead of staying within the visible area.
Steps to Reproduce
Details:
Page: The issue occurred on the dashboard page when accessed via localhost:3000. Action: I was attempting to change the widgets from their default fixed position to a floating state. Issue: Upon switching to floating mode, the widgets did not remain within the bounds of the dashboard. Instead, they unexpectedly repositioned themselves to random places on the page, causing a disorganized and inconsistent layout.
This behavior disrupts the intended functionality and user experience, as floating widgets should stay within the visible area of the page.
Screenshots
No response
Do you want to work on this issue?
Yes
If "yes" to above, please explain how you would technically implement this
Initial Setup: Starting by placing the widgets in fixed positions using absolute positioning in CSS to create a clean layout.
Switch to Floating: When we switch to floating mode, make the widgets draggable using JavaScript. Libraries like react-draggable make this really easy.
Keep Widgets in View: To stop the widgets from flying off the screen, we can add some boundaries that keep them inside the visible area while being dragged.
Remember Position: we can save the position of the widgets (either locally or on the backend), so they stay in the same spot even after a page reload.
Switching Back: If we go back to fixed mode, either reset them to their original spots or keep them where they were last placed.
This approach keeps the widgets flexible but ensures they don't end up misplaced.