I have an app which requires a Chat with multi-line input. I figured out what I thought were challenging parts including showing up messages, communication with custom back-end and so on. All working.
Turns out my most challenging part is to show multi-line input box that grows upwards while all the rest of the screen remains the same. I realize it’s probably some combination of flex settings, containers, % and so on … please guide me in a right direction if you can as I am lost.
I created simple illustration to describe issues/needs:
What I would like to have happened:
When no messages (or just few) - “chat” buttons are fixed at the top and single input line shows at the bottom. When user starts typing - keyboard shows up, input box is right above keyboard and as user types and goes to the second line - input box expands in two, three … as many lines as needed.
When many messages - they are scrollable while “chat” buttons are fixed at the top - same as note when user starts typing in the multi-line. User can still scroll the messages.
I would also like the background image for the chat. I do know how to set it up - but not sure if it all works with the above two requirements.
I can post a simple app that shows the issue or maybe you have some simple suggestions for me on how to make this work.
Thanks a LOT for any help.