On mobile browser: Let keyboard squeeze or move a repeating group up?

Need help
1

Hi,

I am currently making my chat reponsive and encountered a problem:

kind of hard to explain but how can I squeeze a repeating group together when the user sets focus on an input form? Example:

When you enter a chat in whatsapp you see the whole conversation and as soon as you enter the input-form your keyboard pushes the input-form upwards and squeezes the conversation.

Example (left with keyboard, right without keyboard - sorry could not find a better example)

Hope somebody can help?

2

Thatā€™s cool. I havenā€™t used responsiveness - so I donā€™t know if there is a better way.

But I would try to set it up so:

ā€œWhen this input fields value is focused or not empty > show a new group.ā€
(The new group would be the emoticons + the input field (you may even have to have two input fields - one to trigger this group to show - and then another inside the groups)) - because getting an entire group to show from under the input field; then push it up might be pretty trickey.

But anyway - the new group could be a ā€œgroup with focusā€ focused to your apps ā€˜footerā€™
Then a final workflow - that scrolls to your chat feeds:last item.

ā€” that should mimic the result your wantingā€¦

^ Iā€™m wondering if you even need all this though? You should just be able to set your input field to a multiline input - then it will stretch to fitā€¦
(Unless you in fact are wanting to use emoticons/stickers in your appā€¦)

3

Hello

Have you found any solution for this?
I would like to use the keyboard of the device and not creating one

Thanks

4

Hi @yanisbensalem :slight_smile: Are you using an ext. vertical scroll repeating group for the messages? If so, you can place an icon below that repeating group (outside of the rg) and then scroll to that Icon each time the Send Message input is focused.

Note: Youā€™ll have to set the icon to only be visible when the Send Message Input is focused, and then set up the workflow ā€œ(Do When Condition is True - Every Time) When Icon is visibleā€ --> Scroll to the Icon. I have it in an app and it does the trick, but let me know if you have any questions! :slight_smile:

5

Thanks a lot for your feedback
What i am looking for is to reproduce the same mobile experience than sending a message on WhatsAppā€¦the moment you focus on the input, this one goes just above the keyboard, no zooming effect and an input field that stays stick just above the keyboard
I insist on the fact that i am focused on mobile experience

Many thanks for your help

6

Right! Iā€™m sorry I forgot to mention I also have the New Message input inside of a floating group set to float: bottom, at the bottom of the screen. That, as well as the scroll to Icon each time an Input is focused should display the input above the keyboard each time a User begins typing, and scroll the User to the bottom of the repeating group, but let me know if not!

7

thanks
does this avoid the zooming effect as well?

8

I think the only way to prevent the zoom on IOS is to make sure the text is at least 16px, but Iā€™m not 100% sure!

9

even if i build a native app with gonative, dropsource or others?

10

@yanisbensalem I havenā€™t done that before so Iā€™m not too sure, but if you start a new thread with that question Iā€™m sure a fellow Bubbler knows!

11

Many thanks for your help :wink:

1 Like