Chat Interface CSS
Alright , CSS is getting the better of me . I 'm trying to come up with a chat interface where the text input field is always pegged to the bottom . The input can expand up to a certain max -height which should case the messages area to adjust accordingly filling any available space . I 'm having troubles on mobile where there 's the sticky header and just getting it to stay where I want it in general on both mobile and desktop . Here 's the branch link : https://editor.nordcraft.com/projects/beige_yoda_subtle_vole/branches/start/components/home?canvas-width=800&canvas-height=800&rightpanel=style I 'm not sure i completely understood but I think this is what you wanted to achieve : https://editor.nordcraft.com/projects/pink_o_en_lars_unnecessary_perch/branches/start/components/home?rightpanel=style&mode=design&canvas-width=980.6&canvas-height=800 @Filip Dajkovic thank you so much for taking a look ! That 's much better ! I 'm still wondering how to do a few things though . Here 's a video of the layout I 'm trying to achieve : https://share.zight.com/yAuRKO0w This is one way to approach it , keep in mind that this solution is using span instead of textarea so there may be some issues , if you want to use textarea element than I think Javascript is the only solution . You can also see the css in the page that allows the behaviour you want to achieve . https://editor.nordcraft.com/projects/maroon_beru__hitesun_lars_detailed_cicada/branches/start/components/home?rightpanel=style&canvas-height=800&canvas-width=1420&mode=test
.jpeg/public)