search

mui / toolpad

Toolpad: Full stack components and low-code builder for dashboards and internal apps.
https://mui.com/toolpad/
MIT License
1.27k stars 282 forks source link

Components overlapping when horizontally resized #826

Closed prakhargupta1 closed 2 years ago

prakhargupta1 commented 2 years ago

Duplicates

Latest version

Current behavior 😯

https://user-images.githubusercontent.com/92228082/185468526-d88441c6-4315-430a-b295-98078f3be059.mov

Not sure if this is the expected behavior as of now. But sometimes the component is pushing the adjacent one, sometimes it is not.

apedroferreira commented 2 years ago

thanks for finding this Prakhar! are you able to send me the DOM object from the app where you have this issue? that might help me reproduce it and understand it better nevermind, not needed

apedroferreira commented 2 years ago

oh wait, i think the only issue here is that the resizing is not aware that the text input has a minimum width, so it does not respect it. this might be a tough issue to fix, but i'll see how we can improve this

Janpot commented 2 years ago

We can make it always fullWidth and remove that property? How would we size a texfield that is the only component on a row?

prakhargupta1 commented 2 years ago

@apedroferreira In case it helps, here is the link to the app: https://master--toolpad.mui.com/_toolpad/app/cl1on1bd80041a1pdrrfdt0rq/editor/pages/cl6ysktjz00023b6g8xkizxr8

apedroferreira commented 2 years ago

How would we size a texfield that is the only component on a row?

with some improvements to resizing we could make it possible to adjust the left/right margin in the container to any value (even the top/bottom margins probably), as well as resize the text input horizontally to any possible size. right now it's very basic though so users can't do it yet...

We can make it always fullWidth and remove that property?

as things are for now if we had this type of component always be full width i guess we wouldn't be able to add any margins? and i guess any imposed minimum width in any component would still create visual issues like these?