Expandable layout for input box

user_13926190 0
Viewed 48

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

material-ui reactjs
1 Answers

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.

user_64452720
Related