This repository has been archived by the owner on Dec 23, 2022. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 209
margin='dense' doesn't actually make input field smaller #318
Comments
It's aligned such that the chips fit inside the box by default without making the chips smaller. I didn't really check if it matches the size of other input fields. |
Right, I had to make the chips smaller to fit my custom-styled input and did so with a custom |
Any solution found? I need to match the size of chipInput to Textfield size small. |
This is how I did it: DenseChipInput.js import React from 'react'
import ChipInput from 'material-ui-chip-input'
import { Chip } from '@material-ui/core'
import styles from './DenseChipInput.module.css'
export default function DenseChipInput(props) {
return (
<ChipInput
classes={{
label: styles['chip-input-label'],
chip: styles['chip'],
inputRoot: styles['chip-input-root'],
input: styles['chip-input'],
helperText: styles['helper-text']
}}
variant='outlined'
margin='dense'
chipRenderer={chipRenderer}
{...props}
/>)
}
function chipRenderer({ text, handleDelete, isDisabled, className }, key) {
const chipProps = {
label: text,
onDelete: handleDelete,
disabled: isDisabled,
className,
key,
size: 'small',
variant: 'outlined'
}
return <Chip {...chipProps} />
} DenseChipInput.module.css /* For some unknown reason the default styles has higher specificity */
.chip-input-root {
padding-top: 0 !important
}
.chip-input {
margin-bottom: -4px !important
}
.chip-input-label {
top: 0 !important
}
.chip {
margin: 2px 8px 0 0 !important
}
.helper-text {
margin-bottom: -7px
} |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
The top row uses Material UI's fields and the bottom are 2
ChipInput
s. All fields havemargin='dense'
but the chip inputs' height are not the same as the top row.I did manage to fix them by removing padding and margins but still, it should be aligned out-of-the-box.
Thanks
The text was updated successfully, but these errors were encountered: