The corrected message bar is too high with the keyboard in the web application

Question

I have a responsive web application. I tried to imitate the message bar commonly found in mobile applications. However, although I have a message bar set to a fixed one at the bottom, the message bar is too tall and becomes uncommitted when the keyboard appears.

The two figures below show how it starts, and the second shows how it jumps up.

How does it start:

How does he jump from the keyboard

The application is in Ruby. Here is the message form:

<%= form_for(@message) do |f| %> <%= f.text_area :body, placeholder: "Write a message...", class: "message-box", required: true %> <%= f.hidden_field :match_id, value: @match.id %> <%= f.submit "Send", id: "send-message", data: { disable_with: "Loading..." } %> <% end %> 

Here is the jquery that I use to expand the message while typing. I think it’s important to show what I use to advise on how to get it to stick to the bottom:

 var span = $('<span>').css('display','inline-block') .css('word-break','break-all') .appendTo('body').css('visibility','hidden'); function initSpan(textarea){ span.text(textarea.text()) .width(textarea.width()) .css('font', textarea.css('font')); } $('.message-box').on({ input: function(){ var text = $(this).val(); span.text(text); $(this).height(text ? span.height() : '30px'); }, focus: function(){ initSpan($(this)); }, keypress: function(e){ if(e.which == 13) e.preventDefault(); } }); 

Sass

  form{ background-color: #f5f5f5; bottom: 0; border-left: none; border-right: none; border-bottom: none; border-top: 1px solid #d1d1d1; float: none; height: auto; margin: 0; padding: 0; position: fixed !important; width: 100%; z-index: 5; #message_body{ background-color: $white; border: 1px solid #d1d1d1; border-radius: 10px; bottom: 7px; color: $dark_blue; float: none; font-size: 16px; font-weight: 400; height:25px; left: 10px; line-height: 20px; margin: 8px 0 0 10px; resize:none; overflow:hidden; padding: 5px 0 0 5px; width: 75%; } #send-message{ background-color: #f5f5f5; border: none; bottom: 0; color: $dark_blue; height: 43px; float: none; font-size: 16px; font-weight: 600; line-height: 0; margin: 0; right: 10px; padding: 0; position: fixed; width: auto; } textarea{ &::-webkit-input-placeholder { font-size: 16px; line-height: 16px; padding: 3px 0 0 5px; } &::-moz-placeholder { font-size: 16px; line-height: 16px; padding: 3px 0 0 5px; } &:-ms-input-placeholder { font-size: 16px; line-height: 16px; padding: 3px 0 0 5px; } &:-moz-placeholder { font-size: 16px; line-height: 16px; padding: 3px 0 0 5px; } } } 

Any tips? Thanks.

Answer 1

If this is a known bug, you can try a temporary fix for each device that creates this problem.

First find a device with something like this

 /Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent) 

Then try dynamically changing the fixed position for the focused and blurry states of your element:

 $('.message-box').bind('focus blur', function(e){ // These are example numbers as I can't test for your situation. // You might want to try margins or whatever works, as well as applying // them to all the fixed elements of your form. e.type == 'focus' && $(this).css('bottom','-150px'); e.type == 'blur' && $(this).css('bottom','0px'); });