Skip to content
This repository has been archived by the owner on Dec 23, 2022. It is now read-only.

HelperText component overflow the container #266

Open
VincentCharpentier opened this issue Feb 11, 2019 · 3 comments · May be fixed by #310
Open

HelperText component overflow the container #266

VincentCharpentier opened this issue Feb 11, 2019 · 3 comments · May be fixed by #310
Labels
bug

Comments

@VincentCharpentier
Copy link

I'm trying to use the HelperText with material-chip-input.

The helper text div has a class (.ChipInput-helperText-74) which apply margin-bottom: -20px.

I expected the whole component to fit its container, even if it means it will grows at some point.
Is it expected or a bug ?

Thank you

after some DOM manipulation I found out that I needed two changes to make the component work as I expect:

  • the chip container (.ChipInput-chipContainer-67) must have position:relative
  • the helper text should not have margin-bottom: -20px (it has margin provided by material-ui)

Sorry, I don't have the time to make a proper contribution :(
@leMaik
Copy link
Member

leMaik commented Feb 13, 2019

A PR or at least some code to reproduce this issue would have been nice.

@leMaik leMaik added the bug label Feb 13, 2019
@VincentCharpentier
Copy link
Author

VincentCharpentier commented Feb 13, 2019 •
edited
Loading

Sorry about that. Here it is:

<ChipInput
  defaultValue={['foo', 'bar']}
  helperText={'overflow'}
  style={{background:'red'}}/>

@VincentCharpentier
Copy link
Author

I will try to find some time to fork and PR, not sure when though

vdh added a commit to vdh/material-ui-chip-input that referenced this issue Apr 3, 2020
@vdh
Removed negative margin on FormHelperText
0623d05 
A negative margin is not how the official TextField handles the FormHelperText, so it shouldn't be baked into this style here.

Fixes TeamWertarbyte#266
@vdh vdh linked a pull request Apr 3, 2020 that will close this issue
Open
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Removed negative margin on FormHelperText vdh/material-ui-chip-input
2 participants
@VincentCharpentier @leMaik