search

mohitahlawat2001 / shiny-octo-planner-app

planner application have many widgets Clock Widget, Timer Widget, Calender Widget , Weather Widget , Game Widget, White Board Widget, News Widget, Quote Widget ,
https://shiny-octo-planner-app.vercel.app/
MIT License
16 stars 18 forks source link

Unexpected Widget Behavior: Floating Widgets Mispositioned on Page #26

Closed nidhi752 closed 2 weeks ago

nidhi752 commented 3 weeks ago

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.

mohitahlawat2001 commented 3 weeks ago

please make video or photo of issue @nidhi752

nidhi752 commented 3 weeks ago

https://github.com/user-attachments/assets/69a250ca-952d-4039-8556-b410066ca5d7

mohitahlawat2001 commented 3 weeks ago

i will assigned it to you ,

make sure you follow and star ⭐ repo

nidhi752 commented 3 weeks ago

As you can see, the wigdet keeps disappearing. Please assign this issue to me under hackoctoberfest'24