Messagebar in Android with Material Design stays behind keyboard.
Can you make a jsfiddle with the error, or share your code, in that way we can help you.
This is the code of the messages page
<template>
<div class="page no-tabbar navbar-fixed task">
<div class="navbar">
<div class="navbar-inner">
<div class="left sliding">
<a href="#" class="back link ">
<i class="fa fa-chevron-left"></i>
<span class="ios-only">Zurrück</span>
</a>
</div>
<div class="title sliding">{{user.first_name}}</div>
<div class="right sliding">
<a href="/user/{{user.id}}/" class="link icon-only">
<img src="{{user.picture}}" class="img-circle" width="36" height="36" />
</a>
</div>
</div>
</div>
<div class="toolbar messagebar" @messagebar:attachmentdelete="deleteAttachment">
<div class="toolbar-inner">
<!--a class="link icon-only" @click="sheetToggle">
<i class="fas fa-camera-retro"></i>
</a-->
<div class="messagebar-area">
<textarea class="resizable" placeholder="Nachricht"></textarea>
</div>
<a class="link icon-only demo-send-message-link" @click="sendMessage">
<i class="fas fa-paper-plane"></i>
</a>
</div>
<div class="messagebar-sheet">
{{#each images}}
<label class="checkbox messagebar-sheet-image" style="background-image:url({{this}})" @change="handleAttachment">
<input type="checkbox">
<i class="icon icon-checkbox"></i>
</label>
{{/each}}
</div>
</div>
<div class="page-content messages-content">
<div class="messages">
</div>
<!--div class="messages-title"><b>Sunday, Feb 9,</b> 12:58</div>
<div class="message message-received">
<div class="message-avatar" style="background-image:url(./img/momo.jpg)"></div>
<div class="message-content">
<div class="message-name">Momo</div>
<div class="message-bubble">
<div class="message-quote">
<div class="quote-title">Bühne putzen</div>
<div class="quote-description">Mir ist das eis auf der Bühne runter gefallen, könnte sich jemand darum kümmern? ...</div>
</div>
<div class="message-text">
Hi, ich mach das dir gerne wieder sauber!
</div>
</div>
</div>
</div-->
</div>
</div>
</template>
<script>
return {
beforeCreate() {
var self = this;
self.photos.load();
},
data: function () {
return {
photos: {
load: function () {
var self = this;
/*
if(deviceready) {
cordova.plugins.photoLibrary.getLibrary(
function (result) {
console.log(result);
var isLastChunk = result.isLastChunk;
//var self.images = chunk.library;
console.log(result.library);
if (isLastChunk) {
console.log("last");
}
},
function (err) {
console.log("error")
if (err.startsWith('Permission')) {
console.log('Please provide the permission');
// TODO: explain to user why you need the permission, and continue when he agrees
self.photos.request();
} else { // Real error
console.log('Error in getLibrary: ' + err);
}
}, {
//chunkTimeSec: 0.3,
}
)
}
*/
},
request: function() {
/*
if(deviceready) {
cordova.plugins.photoLibrary.requestAuthorization(
function () {
// Retry
self.photos.load();
},
function (err) {
console.log('Error in requestAuthorization: ' + err);
// TODO: explain to user why you need the permission, and continue when he agrees
// Ask user again
self.photos.request();
}, {
read: true,
write: false
}
);
}
*/
}
},
msg: 0,
sending: false,
responseInProgress: false,
}
},
methods: {
sheetToggle: function () {
var self = this;
self.messagebar.sheetToggle();
},
deleteAttachment: function (e, index) {
var self = this;
var image = self.messagebar.attachments.splice(index, 1)[0];
self.messagebar.renderAttachments();
self.checkAttachments();
// Uncheck in sheet
var imageIndex = self.images.indexOf(image);
self.$el.find('.messagebar-sheet .checkbox').eq(imageIndex).find('input').prop('checked', false);
},
handleAttachment: function (e) {
var self = this;
var $$ = self.$$;
var index = $(e.target).parents('label.checkbox').index();
var image = self.images[index];
if (e.target.checked) {
// Add to attachments
self.messagebar.attachments.unshift(image)
} else {
// Remove from attachments
self.messagebar.attachments.splice(self.messagebar.attachments.indexOf(image), 1);
}
self.messagebar.renderAttachments();
self.checkAttachments();
},
checkAttachments: function () {
var self = this;
if (self.messagebar.attachments.length > 0) {
self.messagebar.attachmentsShow();
self.messagebar.setPlaceholder('Nachricht');
} else {
self.messagebar.attachmentsHide();
self.messagebar.setPlaceholder('Nachricht');
}
},
sendMessage: function () {
var self = this;
var text = self.messagebar.getValue().replace(/\n/g, '<br>').trim();
var messagesToSend = [];
if(self.sending) return
if (text.trim().length) {
self.sending = true;
var args = {
to: self.user.id,
text: text,
task: ''
}
if(self.task) {
args.task = self.task.id;
}
imochsapi.sendMessage(args, function (data) {
data = JSON.parse(data);
self.sending = false;
if(data.error) {
if (self.toastError) self.toastError.destroy();
self.toastError = self.$app.toast.create({
text: data.error,
closeTimeout: 3000,
closeButton: true,
closeButtonColor: 'blue',
});
self.messagebar.$textareaEl.addClass('animated').addClass('shake').once("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
self.messagebar.$textareaEl.removeClass("disabled").removeClass('animated').removeClass('shake');
});
self.toastError.open();
} else {
// Reset attachments
//self.messagebar.attachments = [];
//self.checkAttachments();
// Hide sheet
//self.messagebar.sheetHide();
// Uncheck selected images in sheet
//self.messagebar.$sheetEl.find('input').prop('checked', false);
// Clear area
self.messagebar.clear();
// Focus area
if (text.length) self.messagebar.focus();
// Send message
self.$el.find('.new-task').remove();
self.messages.addMessage(data);
}
});
}
},
},
on: {
pageBeforeRemove: function (e, page) {
var self = this;
if (self.messagebar) self.messagebar.destroy();
},
pageInit: function (e, page) {
var self = this;
var app = self.$app;
self.messagebar = app.messagebar.create({
el: page.$el.find('.messagebar'),
attachments: []
})
if(self.task) {
var newTaskTemplate = Template7.compile('<div class="block tablet-inset new-task animated slideInUp">\
<h4 class="strong">{{title}}</h4>\
<ul class="dashed">\
<li class="revenue">{{display_amount amount}}</li>\
{{#if duration}}<li><i class="fas fa-clock"></i> {{duration}} Stunden</li>{{/if}}\
{{#if distance}}<li><i class="fa fa-map-marker-alt "></i> {{format distance decimal="2"}} km</li>{{/if}}\
</ul>\
</div>')
self.$el.find('.messagebar').prepend(newTaskTemplate(self.task));
}
self.messages = app.messages.create({
el: page.$el.find('.messages'),
messages: self.messages,
firstMessageRule: function (message, previousMessage, nextMessage) {
if (message.isTitle) return false;
if (!previousMessage || previousMessage.type !== message.type || previousMessage.name !== message.name) return true;
return false;
},
lastMessageRule: function (message, previousMessage, nextMessage) {
if (message.isTitle) return false;
if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
return false;
},
tailMessageRule: function (message, previousMessage, nextMessage) {
if (message.isTitle) return false;
if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
return false;
}
})
}
}
}
</script>if you have / are using cordova-plugin-statusbar then that is why this is not working for you.
Plugins cordova-plugin-keyboard and cordova-plugin-statusbar are not working nicely together 
1 Like