Wrapping and height increasing input React CSS

Question

I try to make an input component where the text is wrapping and height of the input increases at each new line appear. I mean something like on desktop facebook. When you click on someone, open the message box and write something in the input, the input becomes larger every new text line.

I am using textarea for it: <Input />

const Input = styled.textarea`
  border: 0;
  outline: none;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 14px;
  width: 100%;
  overflow-wrap: break-word;
  height: 24px;
`;

And after entering 5 lines of text, the scroll bar should appear. How can I do this?

not really, because the height doesn't increase every new line — some nooby questions
– some nooby questions, Commented Oct 13, 2021 at 22:11

D-Money · Accepted Answer · 2021-10-14 10:33:21Z

2

If it doesn't have to be a textarea, the contenteditable attribute can do this - add it to a <div> and set a max height for the scrollbar to appear:

.demo {
  width: 100px;
  min-height: 20px;
  max-height: 100px;
  overflow-x: hidden;
  overflow-y: scroll;
  border: 1px solid black;
}

<div class="demo" contenteditable></div>

If it must be a textarea, then you will have to use a script to resize it - there's some good approaches listed here: CSS Tricks: Auto growing inputs and textareas

edit Here's a demo in react, using the contentEditable attribute (use camelCase for React jsx) with a placeholder. The placeholder is added using a pseudo element:

const ContentEditable = ({ placeholder }) => (
  <div class="demo" contentEditable="true" placeholder={placeholder}></div>
);

ReactDOM.render(
  <ContentEditable placeholder="Type something..." />, document.getElementById("react")
);

.demo {
  width: 100px;
  min-height: 20px;
  max-height: 100px;
  overflow-x: hidden;
  overflow-y: scroll;
  border: 1px solid black;
}

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  color: #555;
  pointer-events: none;
  display: block;
}

<div id="react"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

edited Oct 14, 2021 at 10:33

answered Oct 13, 2021 at 22:21

D-Money

2,49517 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

some nooby questions Over a year ago

The contenteditable method is fine, but how can I add this attribute to react component? I saw a lib for it react-contenteditable but this component doesn't has placeholder attribute.

D-Money Over a year ago

sorry I should have included a react example - updated my answer with a react demo that has a placeholder

Collectives™ on Stack Overflow

Wrapping and height increasing input React CSS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related