multiline TextField - floating label

Question

When using TextField in multiLine mode, the floating label does is not located on the left. It does not seems to appear on the documentation example, but when applying the code given there, this is what happens:

  <TextField
  hintText="Message Field"
  floatingLabelText="MultiLine and FloatingLabel"
  multiLine={true}
  rows={2}
/>

this does not happen then not using the multiLine mode.

Answer 1

You can fix this easily by using the style property of the <TextField/> component like this.

<TextField
  style={{textAlign: 'left'}}
  hintText="Message Field"
  floatingLabelText="MultiLine and FloatingLabel"
  multiline
  rows={2}
/>

Hope this helps. If that doesn't work than it's likely that you have another style rule interfering with your <TextField/>.