Closed fityannugroho closed 1 year ago
Hello @fityannugroho !
Could you please share me a codesandbox plzzzz.
Hello @fityannugroho !
Could you please share me a codesandbox plzzzz.
Check out this @viclafouch
https://codesandbox.io/s/fixed-fullwidth-mui-file-input-jqmq7u
Also want to add, that even with fixed full width, all field space should open system file dialog on click.
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.To Reproduce
Steps to reproduce the behavior: Import and use the React component
MuiFileInput
withfullWidth
is set, or put theMuiFileInput
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).
Additional context
The file name also need improvement.
Possible solution
I think by adding CSS
width: 100%
rule into theLabel
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?