TextField label bleeds out of the TextField bounding box

[FunMiles]

The TextField component moves its label up, outside of the bounding box used for measuring/laying out components. See the following images. The first is with the label filling the box before any input.

Once the first two boxes have input, their labels have moved up and now bleed out of the divs containing the TextFields. For the first box, it has moved outside of the div that contains all three TextFields and the second one's label encroaches on the first TextField space.

PS: The code for the above is nothing more than:

<TextField>First field</TextField>
<TextField>Second field</TextField>
<TextField>Third field</TextField>

[Florian-Schoenherr]

Some time ago we had more margin on it, but it should at least not overlap.

[FunMiles]

The enclosing div should have a bigger top margin. I don't know how to do it properly to handle things like a user's default font scaling via accessibility controls.

[TheComputerM]

@FunMiles You can just add a <br> btw the text fields or add the margin helper classes. I removed the default margin for more customizability so you can set the margin to whatever you like.

[Florian-Schoenherr]

@TheComputerM This is nice, but I would have a suggestion: Most people want to put TextField under TextField:

<TextField>First field</TextField>
<TextField>Second field</TextField>

So I would do let klass = 'mt-3'; inside TextField. But I think it should atleast not overlap, because that means it would overlap with anything, like he says: it bleeds out.

[FunMiles]

@TheComputerM What @Florian-Schoenherr said is correct. It should not bleed.

If I can make a constructive comment, it might be worth having a look at how React's material-ui does it. I was looking at the html generated by materialify's TextField vs React's equivalent and the former has 5 nested divs around <label> and <input>. React's material-ui has 1 <div> around <label> and 2 around <input>. I looked into it after the comment about performance of css selectors in another thread. Though, in modern browsers, nested <div> won't affect much the performance, when trying to debug the styling, it makes it complicated to look at 😛

I have implemented my AutoCompleteText for my personal use around TextField or Textarea (selectable via prop) and will gladly contribute it. But I might take a bit more time and try to create a two level equivalent of TextField and put that in as well.

See the autocomplete issue for a video of the current state of my autocomplete widget.