F7 2.2.5 Material Design Messagbar on Android


#1

Messagebar in Android with Material Design stays behind keyboard.


#2

Hi @Momo,
No it dosn’t


#3

this is how it looks at me, i think its because of keyboard shrink but i am not sure :confused:


#4

Can you make a jsfiddle with the error, or share your code, in that way we can help you.


#5

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&uuml;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>

#6

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 :slight_smile: