Hello,
I got one problem with floating and positioning on Mobile devices.
I got page with chat:
When the Keyboard appears its seems that the page does not see whole keyboard element as the position of elements are incorrectly positioned as on below screen:
With emojis keyboard it’s looks even worse:
Anyone know how to handle this? 
Welcome to the desert wilderness of iOS keyboard formatting and bubble group sizing. While solvable, this is an extremely tough problem to get around that took me 100s of hours to solve. Consequently, there’s no way for me to completely break down the solution for you, but I can hopefully get you going in the right direction.
The solution is CSS heavy so I hope you’re familiar with CSS.
You will need to apply the following CSS to the chat page floating group:
overflow: hidden !important;
position: absolute !important;
overflow-y: auto !important;
height: calc(100vh - 186px) !important;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
Note: The 186px was the height of my text field area, change to whatever is correct for yours.
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
If you’ve done this correctly, and done a crap ton of tweaking, then the end result will be the chat page is set to the exact height of the viewport for all devices and will rise with the keyboard as a result. Additionally, the flipping will cause the RG to load from the bottom (previously the top) and for excess messages to expand up through the top of the page (until you scroll up to them).
Here’s a gif of the result for my app:
I also played around with a bunch of custom javascript and conditionals to get the text field and header to float and resize like I wanted, but that’s a whole other ball of wax.
Hopefully this helps.
Oh Man, thats the answer! I will test it a little bit later and i will tell you my results i think i will handle it 
But! Could you Please also share your knowledge about auto heighting the cells? I see your chat looks exactly how i want
It’s a full list loading RG. Here’s the CSS I have applied to a group in each cell depending on whether they’re an incoming or outgoing message.
#outmsgbubble {
min-height: 35px !important;
height: auto !important;
max-width: 280px;
float: right !important;
width: auto !important;
position: relative !important;
}#inmsgbubble {
min-height: 35px !important;
height: auto !important;
max-width: 260px;
float: left !important;
width: auto !important;
position: relative !important;
}
I don’t remember any of the details around what I did to make it look exactly how it does, but that CSS is definitely the key.
@aj11, thanks a lot! Your Solution works partialy for me as still i got problem with emoji Keyboard, maybe you know how to fix it:
Hmm I just realized this a problem for my app too. My users don’t use emoji much so it hasn’t been reported.
I’m at a loss here because there’s no way to detect the key press on the keyboard that I know of, especially since it’s not typing anything when you tap it. I’ve been looking at and testing javascript, but it doesn’t seem like any event is fired when the user taps on the keyboard.
If there were an event fired when the user taps, then a script could be set up to scroll down to bottom on every tap, which should solve this. The event is the problem.
If you find an answer let me know.
Hi! How are you?
Sorry for ask this for you, but i need for help about how you make for what the multiline imput it’s at the bottom of the screen, in my messaging system even though it’s at the bottom of the screen (looking through the bubble editor) when I preview the app on my mobile, there’s a big blank space below it.
Just opened this box too and wish I never did 
kudos for the workaround 
Sounds extremely painful
