When i am clicking on input keyboard covers all the content. i need to show the input top/up/above to keyboard as in whatsapp app.
<div *ngSwitchCase="'home'">
<!-- Show list of users -->
<div *ngFor = "let item of data?.slice()?.reverse()">
<!-- When the message type is text the current user sees this-->
<div class="received chat-box" *ngIf="item.uid == user.uid">
<h6>{{item.message}}</h6>
<p>{{item.time.toDate() | date: "dd/MM/yyyy HH:mm a"}}</p>
</div>
<!-- When the message type is text friend sees this-->
<div class="send chat-box" *ngIf="item.uid != user.uid">
<h6>{{item.message}}</h6>
<p>{{item.time.toDate() | date: "dd/MM/yyyy HH:mm a"}}</p>
</div>
</div>
<div class="foo">
<!-- Message text area with attachment -->
<div class="input-wrap">
<ion-textarea autosize
placeholder="Type Message here"
[(ngModel)]="newmessage"
(focusin)="onFocus()"
>
</ion-textarea>
<ion-button fill="clear" slot="end" color="dark" (click)="addmessage()" [disabled]="!newmessage">
<ion-icon src="\assets\icon\send.svg"></ion-icon>
</ion-button>
</div>
</div>
</div>
Any one please tell any trick to solve it . thanks
Check your package.json file make sure your cordova plugin keyboard version is "^2.2.0" or greater. You can simply remove it by
ionic cordova plugin rm cordova-plugin-ionic-keyboard
add by
ionic cordova plugin add cordova-plugin-ionic-keyboard#2.2.0
Then it will work fine because i have try the other below version and there is issue on those version.
Working fine in ionic#5.4.6 and cordova#9.0.0
Related
I got 'invalid location of tag (a)' message, when I am working on my JSP page.
<a href="abc.html">abc</abc> this tag is not working properly.
<form class="form-inline my-2 my-lg-0">
<c:choose>
<c:when test="${sessionScope.SIGNIN_ID == null}">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">
signin
</button>
</c:when>
...(I erased unnecessary part)
</form>
</nav>
</header>
a tag is located under body > header> nav > form > button > a.
I tried to add <div> after <form> and add <tr>``<td> before <form> but it still doesn't work.
I also have jstl file in my \lib. Is there anyone who can help?
You can't have an a tag inside a button tag, in HTML. What are you trying to achieve, with the href (signinForm.html) inside the button?
I have added the date time picker but I can't center every thing in the calender?
the fault one
The right one
This is the html code
<div class="form-group" id="dateTimePickerContainer">
<label>
<input name="datetimepicker" type='text' class="form-control" id='datetimepicker'/>
</label>
</div>
And this is the Jquery code
$('#datetimepicker').datetimepicker();
I solved it, the problem that the css file was not included in the project.
So I had to download the css and included it in the bootstrap files.
Anyone can download it from here.
a
I have the below ionic range in my html file. I tried finding to customize the css but no success. I want something like this
<div class="item range">
<input type="range" name="volume">
</div>
I am using an older version of AngularUI (version 0.13.4 - 2015-09-03) with Datepicker. I have the popup date set to use 'MM/dd/yyyy'. The problem, if a user does not use the popup datepicker and types in 10/18/2016, it works fine. If the user types in 10/18/16, it does not recognize it as a date. I've tried using some custom validation below, but I can't get it to work with the datepicker. If I remove "datepicker-popup="MM/dd/yyy" from the input the validation works, but of course, the datepicker no longer works. I cannot get the datepicker and the validation to work together.
Here is my HTML:
<ng-form name="form">
<p class="input-group">
<span style="float:left">
<input name="dteAnswer" style="width:200px; height:30px" class="form-control" placeholder="mm/dd/yyyy" ng-pattern='/^(0?[1-9]|1[012])\/(0?[1-9]|[12][0-9]|3[01])\/(199\d)|([2-9]\d{3})$/' ng-model="q.dteDateAnswer" type="text" is-open="status.opened" datepicker-popup="MM/dd/yyyy">
</span>
<span ng-show="form.dteAnswer.$error.pattern">Incorrect Format, should be MM/DD/YYYY</span>
<span style="float:left" class="input-group-btn"><button style="height:30px" type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button></span>
</p>
</ng-form>
Any assistance is greatly appreciated!
I am using materializecss for the first time in my web application and
I am struggling with datepicker. It is not working at all.
I imported materialize.css and js file and use the code
<div>
<input type="date" class="datepicker" />
</div>
and added script code
$(document).ready(function() {
$('select').material_select();
window.picker = $('.datepicker').pickadate({
selectYears: 16, // Creates a dropdown of 15 years to control year
format: 'yyyy-mm-dd'
});
});
but nothing worked, it shows a disabled text box.
Also I want to know how to add timepicker in materializecss?
I had the same problem. My problem was solved with downgrading jquery to 2.1.4. It seems, that on some reason the datetimepicker and jquery 2.2.1 are not working together.
cheers
Thomas
First to know, you need to check the version of your Materialize css and javascript version, also don't forget to check jquery version and use the initialization code in your custom init javascript.
check my code in init.js for initialization, CSS and JS Materialize via cdn
$(document).ready(function() {
$('.modal').modal();
//this are my init
$('#dtp').datepicker();
$('#dtp').setDate(new Date());
});
<html>
<head>
<!-- this is my CSS via cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
</head>
<body>
<div class="row">
<form class="col s12 m6 card">
<div class="row center">
<h4>Materialize DateTime Picker</h4>
<div class="input-field col s12 m12">
<input id="dtp" type="text" class="datepicker">
<label for="dtp">Birthday</label>
</div>
</div>
</form>
</div>
<!-- this is my JS via cdn -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
</body>
</html>
Check the documentation from Materialize website, it is always helpful for programmers like me.
Hope this answer help you
Try to run my Code Snippet
<div class="row">
<div class="input-field col s12">
<input id="idate" type="text" name="idate" class="datepicker" >
<label for="idate">Issue Date</label>
</div>
</div>
$('.datepicker').pickadate({
selectMonths: true,// Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year,
});