Material-ui: [TextField] New handling of Errortext for TextField destroys layouts.

Created on 13 Jul 2015 · 22Comments · Source: mui-org/material-ui

Since last changes TextFields seem to move surrounding elements when there is an error displayed.

I have a form and are positioning items inline-block.
Until now all items where the same height no matter if a hint was displayed or not.
Since last release all other Textfields move once I display an error.
I'm not quiet sure why this happens.
I have attached a screenshot.

materialuitextfields

Is that on purpose or caused by a bug? I noticed same behaviour on the TextField Component Showcase site.

bug 🐛

Source

WolfspiritM

Most helpful comment

As a workaround I set now:
errorStyle={{
float: "left"
}}

Which makes it work again. It also works with multiple lines. The only issue is if too many lines (more then two) are used it's overlapping with the textfield (label) below it, but I don't think this can be prevented easily and it's not a big issue (at least for me).
Not sure if that might interfere with the normal usage of the textfield, otherwise you might want to add it to the default style for the errorfield.

WolfspiritM on 30 Jul 2015

🎉5 👍4

All 22 comments

@WolfspiritM This might be a bug, the position of the errorText is "relative" so its going to push down any components beneath it, but we had set it to relative so that it did not overlap with the text-field as it used to in a previous bug. @hai-cea Is this a problem we need to fix with the errorText?

Zadielerick on 13 Jul 2015

@WolfspiritM That's strange that it's pushing the error text fields up. Can you post a sample code please?

hai-cea on 13 Jul 2015

Here is a sample.
https://jsbin.com/cimakofume

The (dirty) code I used:
http://pastebin.com/HRmKetNP

WolfspiritM on 13 Jul 2015

As a workaround I set now:
errorStyle={{
float: "left"
}}

WolfspiritM on 30 Jul 2015

🎉5 👍4

It would be really nice to get this fixed, so the vertical spacing is the same whether there is errorText or not. https://www.google.com/design/spec/patterns/errors.html#errors-user-input-errors

celiao on 1 Nov 2015

Thanks for the workaround, @WolfspiritM. I don't foresee needing more than two lines for an error message so this should work for me

sylvaiam on 2 Nov 2015

The problem with float: left is if you place an element that doesn't include top margin/padding below the text field the error will overlap - float only works here by accident since input fields do include padding to hold the floating text. To fix this correctly, space needs to be allocated for the errorText element as part of the wrapping input height.

pdf on 23 Jan 2016

@pdf We plan on using flexbox so these issues can be fixed much easier

alitaheri on 23 Jan 2016

@alitaheri I'm not sure I can see how flexbox would solve this particular issue...

pdf on 23 Jan 2016

Me neither. I'm just saying we should solve it in the context of flexbox. That's all :grin:

alitaheri on 23 Jan 2016

As an addendum to this, I'd like to see persistent/focus hint text enabled, using the same padded area that will be reserved for error text to resolve this issue. Perhaps that should be a separate issue though.

pdf on 24 Jan 2016

@pdf I think is issue is harder to tackle than it seems. I mean the error text can take up an arbitrary number of lines. maybe we should provide a prop so users can opt in and out of this option. some times taking up less space is more important than layout and some other times not.

As an addendum to this, I'd like to see persistent/focus hint text enabled

Yeah that's another issue. feel free to open one for it so we can track it :grin:

alitaheri on 24 Jan 2016

In the spec it looks like space is always reserved, and reflow is never expected.

pdf on 24 Jan 2016

@pdf The persistent help text is part of #2474.

newoga on 24 Jan 2016

Thanks @newoga - I tried to find that issue but failed.

pdf on 24 Jan 2016

I guess this was fixed by PR for #2474. Closing this. Let us know if this issue still persists we can reopen this.

tintin1343 on 14 Apr 2016

@tintin1343 and others: this bug doesn't appear to be fixed but that PR. Material-UI's version 0.15.4 still behaves the way @WolfspiritM reported at top. Upon error, height of input changes and destroys layout.

Should follow the specs at https://material.google.com/patterns/errors.html#errors-user-input-errors - the picture there says it: regardless of an error or not, all inputs remain at their Y-positions.

Also I think it would be good to add this scenario under http://www.material-ui.com/#/components/text-field so that this behaviour can be seen. There is no example listed to dynamically add the error text.

binarykitchen on 23 Sep 2016

👍7

Hello everyone. Is there an update on this issue? Has it been fixed?

erlgry on 15 Nov 2016

👍5 😕1

@tintin1343 I confirm this error is still present 0.16.7. Can you please re-open this issue? Do you think there's any chance this could be fixed anytime soon?