search

viclafouch / mui-file-input

A file input designed for the React library MUI
https://viclafouch.github.io/mui-file-input/
MIT License
77 stars 17 forks source link

Unresponsive component width when `fullWidth` is `true` #9

Closed fityannugroho closed 1 year ago

fityannugroho commented 1 year ago

Describe the bug

When fullWidth prop is set (or if this component is placed inside flexbox or grid layout), the inner element (<label>) doesn't follow the parent width and creates an empty space. This empty space will be seen after the user inserts the file.

https://user-images.githubusercontent.com/63894003/224220699-86ba6ce8-f3a8-4a1b-b879-334612ade0b9.mp4

To Reproduce

Steps to reproduce the behavior: Import and use the React component MuiFileInput with fullWidth is set, or put the MuiFileInput inside flexbox or grid layout.

Expected behavior

The width of inner element will responsive to the parent elements, like this third input that named "Fixed FullWidth Input" (see picture below).

filled input

Additional context

The file name also need improvement.

Possible solution

I think by adding CSS width: 100% rule into the Label styling can solve the width issue.

But I don't know for the file name. Maybe using CSS text-overflow rule instead of truncate the text?

viclafouch commented 1 year ago

Hello @fityannugroho !

Could you please share me a codesandbox plzzzz.

fityannugroho commented 1 year ago

Hello @fityannugroho !

Could you please share me a codesandbox plzzzz.

Check out this @viclafouch

https://codesandbox.io/s/fixed-fullwidth-mui-file-input-jqmq7u

dubaua commented 1 year ago

Also want to add, that even with fixed full width, all field space should open system file dialog on click.