React.JS Todo App with Drag and Drop

Community feedback

• 

  P

  markus•2,160

  @markuslewinPosted 2 months ago

  Hi!

  Remove the w-screen on the div that's a direct child to #root. It's a block element in a flow layout, so it'll grow to the edges of the screen either way. 100vw sets the element to be 100% of the viewport width, but it doesn't account for the size of the scrollbar. When the page starts scrolling, there isn't enough room for both the 100vw element and the scrollbar, and so the element starts overflowing.

  Marked as helpful

  1
• 

  Chiemeka Okongwu•550

  @Chiemeka2006Posted 2 months ago

  this is a really good project, why dont you make sure to save the todo lists to local storage and also make the theme switcher to be saved to local storage, thats sure to bring more reality and life to your project. ill be uploading my own todo list u can check it out although i might not do the drag and drop, but i might try to find a ibrary out there that could help me accomplish that

  Marked as helpful

  0
• 

  Chiemeka Okongwu•550

  @Chiemeka2006Posted 2 months ago

  also to your question "When the tasks get to the amount which they exceed the height of the screen, how do I not make it not get a scroll bar horizontally ?" you can set the parent of the lists to have the property of overflow-y: auto; and also give the parent a max-height property, how i decided the value i was gonna put for this property was by using the inspector tool to view the height of 1 list then multiply by 6. in your case the height of 1 list is 56px so u should set max-height to 336px; . Then how to get rid of the scrollbar that will appear in the parent container due to the overflow-y: auto; lets say ur parent element is a ul you do : ul::-webkit-scrollbar { display: none; scrollbar-width: 0rem; }

  0