Mam adaptacyjną aplikację internetową. Próbowałem naśladować pasek wiadomości powszechnie spotykany w natywnych aplikacjach mobilnych. Jednak pomimo tego, że pasek komunikatów jest ustawiony na stałe u dołu, pasek komunikatów jest wyświetlany zbyt wysoko i zostaje unieruchomiony po wyświetleniu klawiatury.Naprawiony pasek wiadomości wyskakuje za wysoko z klawiaturą w aplikacji internetowej
Dwa poniższe zdjęcia pokazują, jak się zaczyna, a drugi pokazuje, jak podskakuje.
Jak zaczyna:
Jak to podskakuje z klawiaturą
Aplikacja jest w Ruby. Oto formularz dla wiadomości:
<%= 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 %>
Oto jquery, którego używam do rozwijania wiadomości podczas pisania. Myślę, że to ważne, aby pokazać, co używam w celu uzyskania porady jak zrobić to przylegające do dna:
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;
}
}
}
Wszelkie porady? Dzięki.
To brzmi jak [znanego problemu/design-choice w iOS] (http://stackoverflow.com/questions/15199072/ios-input- focused-inside-fixed-parent-stops-position-update-of-fixed-elements). Jeśli szukasz rozwiązania, prawdopodobnie zechcesz utworzyć [MCVE] (http://stackoverflow.com/help/mcve), abyśmy mogli zbadać problem. –