I am experiences a problem with keyboard. I have a page with a list containing 5 input fields. When the keyboard shows the page pushes up and when the keyboard hides the page position remains the same. When I inspect it, shows that there is a padding-bottom:300px present even after the keyboard hides.
Is there any solution for the same? Please find the html code below
<ion-content padding #content>
<img src="assets/imgs/ic_tutorial_three.png" style="height:150px;width:150px">
<ion-card>
<ion-item>
<ion-avatar item-end class="margin-bottom-none" *ngIf="validCurrentKey">
<img src="assets/imgs/ic_tick.png" class="tick-button">
</ion-avatar>
<ion-label color="primary" stacked>Your Current PIN</ion-label>
<ion-input type="password" placeholder="PIN" (ionChange)='checkCurrentPassword($event)'></ion-input>
</ion-item>
<ion-item >
<ion-label color="primary" stacked>Enter Your New PIN</ion-label>
<ion-input type="password" placeholder="PIN" [(ngModel)]="newPin"></ion-input>
</ion-item>
<ion-item>
<ion-label color="primary" stacked>RE-Enter Your New PIN</ion-label>
<ion-input type="password" placeholder="PIN" (ionChange)="validateNewPassword($event)"></ion-input>
</ion-item>
</ion-card>
<div class="bottom-button">
<button ion-button round full class="submit-button" (click)="goBack()" >UPDATE PIN</button>
</div>
I having the same issue with this question ionic 3 -Keyboard pushes the whole screen up
This behavior occurs because of scroll when input field get Focused.
To disable the scroll when input is focused, Add following code to "app.module.ts" file of your project:
imports: [
IonicModule.forRoot(MyApp, {
scrollPadding: false,
scrollAssist: false,
autoFocusAssist: false
}),
...
],
Also checkout following link for detailed explanation:
https://stackoverflow.com/a/41163695/6862286
Related
I am using a list of expansion panels inside virtual-scroll using scrollWindow,
it works fine until I put this virtual scroll in matSideNav.
<mat-sidenav-container class="example-container">
<mat-sidenav mode="side" opened>Sidenav content</mat-sidenav>
<mat-accordion multi>
<cdk-virtual-scroll-viewport itemSize="50" scrollWindow>
<mat-expansion-panel *cdkVirtualFor="let item of items">
<mat-expansion-panel-header>
<mat-panel-title>
{{item}}
</mat-panel-title>
</mat-expansion-panel-header>
<div>
<div>
Content for {{item}}
</div>
<div>
<button mat-raised-button color='accent'>OK</button>
</div><div>
<button mat-raised-button color='accent'>OK</button>
</div><div>
<button mat-raised-button color='accent'>OK</button>
</div>
</div>
</mat-expansion-panel>
</cdk-virtual-scroll-viewport>
</mat-accordion>
</mat-sidenav-container>
when I expand an expansion panel, the side-nav shows its own scroll instead of varying the height of the virtual scroll.
here is the scenario.
steps to recreate the issue
scroll to the bottom
expand the last item
I am using:
angular15
material-design 15
I am using redux-form and setting up a sign-up form. The fields are not like that appear in sandbox preview on their documentation site.
I tried to provide bootstrap classNames form-group, form-control for field and input respectively but it appears to be default action. Just a bar on bottom.
Actually I have a blue background so I need a completely white box so user can see the grey placeholder of an input field.
My renderFields method:
renderFields(){
return _.map(formFields, ({name,type,placeholder}) =>{
return(
<Field
key={name}
type= {type}
name={name}
placeholder={placeholder}
component={SignupField}
/>
);
})
And Field method:
<div className="form-group">
<input type={type} className="form-control" {...input}
placeholder={placeholder}/>
<div className="red-text" style={{marginBottom:"30px"}}>
{touched && error}
</div>
</div>
And form:
<form class="user-forms" onSubmit=
{this.props.handleSubmit(values=>this.submitForm(values))}>
{this.renderFields()}
<button className="btnSubmit btn btn-primary"
type="submit">Create Account
</button>
</form>
I expect a box for each input & not line at bottom.
OK I was using materialize css that caused the interference.
I'm building a website with nodejs, express and mongoose. I have concerts to be added in using the RESTful routes and comments of users that are connected with those comments.
When I come to the DELETE route, I want the user to be warned instead of deleting a comment directly. Therefore I'm using bootstraps modal.
Anyhow, this worked just fine for tourdates itself, but on the comments that are connected to the tourdates, I get a very strange behaviour on this. Instead of deleting the selected comment, it always deletes the oldest comment. But this is ONLY if I put the bootstraps modal in, without the modal it deletes the right one, even though I don't change anything on the delete form.
Here's the ejs form without the modal (deletes the chosen comment):
<form action="/tourdates/td/<%=concert._id%>/comments/<%=comment._id%>?_method=DELETE" method="POST" class="deleteForm">
<input type="submit" class="btn btn-danger btn-sm" value="Delete">
</form>
That's the same code with the modal (delete's always the oldest comment instead of the chosen one):
<form action="/tourdates/td/<%=concert._id%>/comments/<%=comment._id%>?_method=DELETE" method="POST" class="deleteForm">
<a class="btn btn-danger btn-sm" data-toggle="modal" href="#collapseDelete" role="button" data-target="#deleteConcertComment">Delete</a>
<div class="modal fade" id="deleteConcertComment" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Delete Komment?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure?
</div>
<div class="modal-footer">
<button class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
<input type="submit" class="btn btn-danger btn-sm" value="Delete">
</div>
</div>
</div>
</div>
</form>
And here's my route:
router.delete("/tourdates/td/:id/comments/:comment_id", function(req, res) {
Comment.findByIdAndRemove(req.params.comment_id, function(err) {
if(err) {
req.flash("error", "Es ist ein Fehler aufgetreten!");
console.log(err);
} else {
req.flash("success", "Kommentar wurde gelöscht!");
res.redirect("/tourdates/td/" + req.params.id);
}
});
});
I really can't see why the second version deletes the oldest comment in the database instead of the chosen one. And as I said, I have exactly the same thing for the tourdates itself using the route /tourdates/td/:id and there it works just fine.
Any ideas?
Update:
#Neil you're right. My mistake was, that I inspected the delete buttons that I "slotted ahead" before the actual delete button. Since I want this "Are you sure" function, the delete buttons that stick to the single comments won't fire the post request, they shall be fired by the delete-button inside the modal.
Now, if I inspect the delete buttons that are slotted ahead, I see three different forms (one after another) in my inspections view and all of them would trigger different comment id's. But if I click on them, the modal will open and the delete button inside the modal always points to the same id.
Please see the picture, the modal-delete button always points to the same form whilst the single delete-buttons point to different forms. But what do I have to change on my code then? enter image description here
I have the following angular html component:
<div fxLayout fxLayout.xs="row" fxLayoutAlign="left" fxLayoutGap="5px" fxLayoutGap.xs="0">
<div flex class="item item-1" fxFlex="95%">
<mat-form-field class="large-field">
<input matInput placeholder="Full Name" aria-label="Full Name" [matAutocomplete]="auto" [formControl]="FullNameCtrl">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSelected($event.option.value)">
<mat-option *ngFor="let data of filteredCompanyFullName | async" [value]="data">
<span>{{ data.FullName }}</span>
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<div flex class="item item-2" fxFlex="4%">
<button matTooltip="Refresh" mat-icon-button (click)="refresh()">
<mat-icon>refresh</mat-icon>
</button>
</div>
</div>
What above does is showing an auto complete drop-down plus a refresh button. I am struggling to style above html to show something like the following picture:
However it looks like the following which is not the desired output:
What should I change to achieve the first image? I want the input field to take 95% width of the row and a small refresh button right next to it aligned to the right.
I have this code in ionic and the problem is that the grid layout isn't showing and the side menu is working well, any help will be great.
<body>
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar-positive">
<div class="buttons">
<button class="button icon button-clear ion-round"</button>
</div>
</ion-header-bar>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-list>
<ion-item>About Us</ion-item>
</ion-list>
<ion-list>
<ion-item>Contact Us</ion-item>
</ion-list>
<ion-list>
<ion-item>Gallery</ion-item>
</ion-list>
<ion-list>
<ion-item>News</ion-item>
</ion-list>
</ion-side-menu>
</ion-side-menus>
<ion-content>
<div class="row">
<div class="col-50"> Gallery</div>
</div>
</ion-content>
</body>
Why are you opening a new ion-list to every item? Shouldn't you just use one list and inserting the items you want in it?
This way can cause problems in the scroll, any kind of distribution you want to apply to the elements should be done by css.