CODEWITHSUNDEEP
reactjsmaterial-ui
John
John

Reputation: 117

Expandable layout for input box

I'm trying to create a chat layout, and i'm having trouble getting the multline in the input box to expand in the same view rather than expanding downwards when typing in the input box and creating a scrollbar. I have added my sample code in the codesandbox link.

https://codesandbox.io/s/solitary-lake-bd85o

Upvotes: 2

Views: 672

Answers (1)

Wiktor Bednarz
Wiktor Bednarz

Reputation: 749

Just change the styles of your container <div> element to flex-box and set the max-height.

<div
    style={{
        maxHeight:  "100vh",
        margin:  0,
        padding:  0,
        display:  "flex",
        flexDirection:  "column"
    }}
>
 // Your chat layout
</div>

With some additional tweaking you will easily get desired outcome.

Upvotes: 1

Related Questions