Skip to content
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

column filter (select) input padding #1276

Open
1 task done
drmax24 opened this issue Oct 23, 2024 · 0 comments
Open
1 task done

column filter (select) input padding #1276

drmax24 opened this issue Oct 23, 2024 · 0 comments

Comments

@drmax24
Copy link

drmax24 commented Oct 23, 2024

material-react-table version

2.13.2

react & react-dom versions

18.0.20

Describe the bug and the steps to reproduce it

if i add InputProps to my column filter which is a select dropdown
clear button (X) disappears
even if i have sx empty it still disappears.

What I try to achieve is to give a little more space for select option text in a narrow column. Ie at this moment most of the space inside select are used by right input padding (24px) and ellipses... ~20 px. and for my letters it uses only around 20 px displaying 2 letters while there is space for at least 6

        {
            accessorKey: "role",
            header: "Rolle",
            enableSorting: false,
            size: 120,
            filterSelectOptions: Object.values(RoleFilterUserOptsEnum),
            filterVariant: "select",
            muiFilterTextFieldProps: {
                placeholder: "Filter",
                sx: {
                    width: "100px",
                },
                InputProps: {
                    sx: {
                        padding: "0px 0px",
                    },
                },
            },
        },

Minimal, Reproducible Example - (Optional, but Recommended)

        {
            accessorKey: "role",
            header: "Rolle",
            enableSorting: false,
            size: 120,
            filterSelectOptions: Object.values(RoleFilterUserOptsEnum),
            filterVariant: "select",
            muiFilterTextFieldProps: {
                placeholder: "Filter",
                sx: {
                    width: "100px",
                },
                InputProps: {
                    sx: {
                        padding: "0px 0px",
                    },
                },
            },
        },

image
if I set InputProps X just disappears
image

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

No, because I do not know how

Terms

  • I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant