Forum Academy Marketplace Showcase Pricing Features

Incorrect positioning on mobile with keyboard

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? :thinking:

1 Like

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.

  1. Make the overall chat page a floating group. With floating set to both for vertical. The chat page’s header can be on this main floating group, but keep the text input field area a separate floating group.

You will need to apply the following CSS to the chat page floating group:

overflow: hidden !important;

  1. Add a group within this floating group that takes up about the whole page. It should have the following CSS that resizes it to the proper height for all viewports, allows it to create its own separate scroll from the page, and vertically flips it.

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.

  1. Place the RG for your messages inside the group from step 2. Apply the following CSS to also flip it vertically. You’ll need to sort the messages so they load with the most recent at the “top” (now the bottom) of the flipped RG.

-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.

3 Likes

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 :sunglasses:

But! Could you Please also share your knowledge about auto heighting the cells? I see your chat looks exactly how i want :thinking:

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.

  • All my groups and pages are the same size as the message group

Just opened this box too and wish I never did :joy: kudos for the workaround :clap::clap:

Sounds extremely painful