CODEWITHSUNDEEP
reactjsmaterial-ui
Hojoong Kim
Hojoong Kim

Reputation: 117

How do I show the text longer than the textfield width in the material ui?

Currently I am developing mobile enterprise web with ReactJs/Material UI and I have question How to show the user a character longer than the limited width TextField.

Of course, users can see all the characters by touching the text field and moving the cursor, but I need a more effective method.

Below are the ideas I have come up with.

  1. Animation Effect? (When TextField is not touched, The effect of moving back and forth to make the entire text visible)
  2. Display multiline text field when the user touches the text field. (dynamic multiline by whole length of text)

Any idea?

enter image description here

Upvotes: 4

Views: 10126

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81270

I'd keep it simple:

  • For long text (content, description...): I'll just set it to multiline

  • For short text (email, password...) I'll set fullWidth on mobile.

There is no need to be overthinking. Look at the forms from the most popular websites you know, do you see anything other than fullWidth or multiline?

But if you set the TextField to multiline you can make it auto resize when there is not enough space to display the long text by setting resize: both in css. The default is none (disabled).

const useStyles = makeStyles({
  textarea: {
    resize: "both"
  }
});

<TextField
  label="MUI Text Area"
  multiline
  inputProps={{ className: classes.textarea }}
/>

Or simply:

<TextField
  label="MUI Text Area"
  multiline
  inputProps={{ style: { resize: "both" } }}
/>

You can also use TextareaAutosize but it sucks and looks nothing like a MUI component out-of-the-box, so don't use it.

Live Demo

Edit 64592081/how-do-i-show-the-user-text-longer-than-the-textfield-width-in-the-material-ui

Upvotes: 7

Related Questions