OvidijusParsiunas
Mobile Keyboard Pushes Entire Chat Component Up in chrome and safari
When the on-screen keyboard opens in mobile browsers, the entire chat component shifts upward instead of adjusting smoothly within the visible viewport.
A detailed discussion has already taken place regarding this issue, and I attempted the previously suggested solution , however, it did not resolve the problem. The issue persists, particularly when interacting with the chat input field on mobile devices.
Initally i thought it might have to do with the parent component, but it is keyboard issue in mobile browser.
can someone advice or look into it?
Hi @badreerauniyar.
Can you elaborate on what you mean by shifts upward? The mobile browsers usually try to make editable content visible on the view port so they will naturally shift up to make sure that the keyboard doesn't cover the input.
Could you elaborate on what your expected behaviour is?
Thankyou!
Hi @OvidijusParsiunas , sorry for late reply , but for clarification , I will paste two images , which should make clear my doubt, that when the keyboard opens up, input must be visible as it is default behaviour, so is chat content, but i want header also to be visible . The chat section can be minimized to whatever possible.
Expected which is with header:
Issues which comes without header:
Thankyou for elaborating on the issue. This unfortunately does not have to do much with Deep Chat and is simply how the mobile browser behaves automatically.
There are "tricks" to prevent this such as using the following tag in your website:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Or even making the header position as fixed.
I would recommend checking online resources or using an AI assistant to help you further.
If you do find a solution for this feel free to share it in this thread!