-
-
Notifications
You must be signed in to change notification settings - Fork 5.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
width=100% does not work for List filter text input #4579
Comments
Thanks for you issue @panfiva! Can you provide a codesandbox example? So we are able to reproduce. |
Confirmed, thanks. |
I'd love to see a fix for this eventually. Until then, I was able to make the input full-width by applying the styles @panfiva suggested using material-ui's support for nested styling. It's fragile, though. See https://material-ui.com/styles/basics/#nesting-selectors const useFilterStyles = makeStyles({
form: {
flex: "1 0 auto",
'& div[data-source=q]': { // Assumes your TextInput source is `q`
width: "100%",
'& div:first-child': {
width: "100%"
}
}
},
}); |
Hello @aliang! It sometimes takes a long time to fix reported issues. However, this repository is open-source and everyone is free to contribute. So, feel free to contribute, your PR is welcome ;) |
PR Created: #5663 |
Just tested this issue with 4.0.0-rc.1, and the issue is still present |
What you were expecting:
I have a list filter with one field. I am trying to make text input 100% of width as follows. However it still stays the default width.
What happened instead:
Although form control received MuiFormControl-fullWidth class which set width:100% on the element), the Text Input Element still remained the original size.
Steps to reproduce:
Add PostFilter component as filter to any list
Related code:
React admin used the following html code to render filter (notice
MuiFormControl-fullWidth
applied properly)I was able to force Chrome to render 100% width by adding the following styles:
add
flex: "1 0 auto"
toform
div;add
width:100%
style to the parent div (div data-source="id"); however i was not able to add this style using properties passed TextInput or Filter components:formClassName
property to be applied to the parent div (per https://marmelab.com/react-admin/Inputs.html#common-input-props); However, the following code also did not work, as no styles were applied to the parent div. Additionally, helper Text did not render.Environment
The text was updated successfully, but these errors were encountered: