<form [formGroup]="variation" (ngSubmit)="onSubmit()">
<ion-list radio-group formControlName="color" *ngFor="let option of options">
<ion-list-header>
{{option.name}}
</ion-list-header>
<ion-item *ngFor="let opt of option.options">
<ion-label>{{opt}}</ion-label>
<ion-radio value="{{opt}}"></ion-radio>
<!--<ion-input type="text" formControlName="color" name="color" value=""></ion-input>-->
</ion-item>
</ion-list>
<button class="custom-button" block (click)="goToCart()">Submit</button>
</form>
Above is my forms in modal
I failed to push to another page from Forms in Modal.
Below is my push to another page method
goToCart() {
this.nav.setRoot(CartPage);
}
Below picture is after I clicked submit button in the form, the modal only slided half
Image to display problems
This is the code:
https://github.com/vinnchan/FormInModal
This app include first page that allow to click and open modal. You click the open modal button.
After that you click submit button and go to cart page.
Now you at cart page, when you click the side menu, it won't open.
I viewed the browser console pane, showed no error(s).
Try to dismiss the modal when submitting:
<button class="custom-button" block (click)="goToCart();dismiss();">Submit</button>
Related
I am trying to have input in dropdown menu in founation, but once input is clicked, whole menu hides, how can I achieve such behaviour?
This is codepen of one of original examples, with just input added:
<input />
https://codepen.io/anon/pen/RqyroK
To achieve what you want you can change this line:
<ul class="dropdown menu" data-dropdown-menu>
To this:
<ul class="dropdown menu" data-dropdown-menu data-close-on-click-inside="false">
An explanation of all dropdown plugin options can be found here.
in my page
foreach ($json->items as $sam) {
$link= $sam->id->videoId;
echo''.$link.'';
//its showing last 5 youtube video id ok.. i set every video id witha button for modal
echo'<button type="button" data-toggle="modal" data-target="#PlayModal" class="btn btn-outline btn-danger">Play</button>';
}
but when im trying to open a model by box in new winddow pop up there only show 1st video ID. modal not getting '.$link.' valu in popup window. modal code puting same page blew finish {}
echo'<div class="modal inmodal" id="PlayModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated bounceInRight">
<div class="modal-body">
<p>'.$name.'</p>
<div class="modal-footer">
<button type="button" class="btn btn-outline btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>';
According to the code given, even the first video should not play.
it is not printing the value of LINK inside the button, so it will not work.
Unless you have a JAVASCRIPT code observing the click and playing the video on click.
You can create the HTML code first manually containing the 5 video ID, and each video should have a button (according to your description), when clicked it will open the modal.
once that is done, you will be able to use php for each to properly echo the html code.
alternatively, the videos are in HTML list, and javascript will handle the event click, reading the video ID and passing to the player in the modal.
in either case, you need to understand the HTML structure first.
my Ionic 2 app has a problem when I show a modal on my home page: when the user closes the modal and get back to the home page, the menu button is not there. That only happens when that modal is shown. Not sure if I'm doing something wrong with the navController. Anyone faced this problem? The header of my page is like this:
<ion-header>
<ion-navbar>
<ion-buttons left class="menu-button">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
<ion-title text-center>
<div class="text-header">Home Page</div>
</ion-title>
</ion-navbar>
</ion-header>
I call the modal like this:
const modal = this.modalCtrl.create(SetMotivoIntervalo, {chamada_id: this.chamada_id});
modal.present();
And for closing modal:
onCloseModal(){
this.viewCtrl.dismiss();
}
Try adding enable-menu-with-back-views="true" property to ion-side-menus
<ion-side-menus enable-menu-with-back-views="true">
</ion-side-menus>
In the following contacts list in iOS 10 device, while doing infinite scrolling angular2+Meteor+Ionic2 app, many times the click event gets fired and the contact detail page gets displayed.
<ion-content class="contacts-page-content">
<ion-list>
<button ion-item *ngFor="let contact of contacts | async" (click)="showContactDetails(contact)" text-wrap class="contacts">
<ion-avatar item-left>
<img[src]="contact.picture">
</ion-avatar>
<h2 class="contact-name">{{contact.firstName}} {{contact.lastName}}</h2>
<h4 ion-text color="grayText">{{contact.jobTitle}}</h4>
<h3 class="contact-supplier" *ngIf="contact.supplierName">{{contact.supplierName}}</h3>
</button>
</ion-list>
<ion-infinite-scroll (ionInfinite)="pullMoreContacts($event)">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more contacts...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
Is there anyway the click while scrolling can be avoided? Any help is greatly appreciated.
Thanks.
Check here for ionic 2 gestures.
Try
(tap)=showContactDetails(contact)
instead of click.
I need to add Icon to the button in a tree view
<button name="gen_link" type="object" icon="/custom_module/static/src/img/image.png" string="MyButton"/>
but as I inspect element in browser its shows me
<button type="button" class="" title="MyButton">
<img alt="MyButton" src="http://localhost:8000/web/static/src/img/icons//custom_module/static/src/img/image.png.png">
</button>
By default it always takes the default path, I am not able to give custom path for the icon.
Any Suggestion. . .
You can use /.. to move up /web/static/src/img/icons// directory.
Insert your button like this (tested):
<button name="gen_link"
type="object"
icon="/../../../../../../custom_module/static/src/img/image"/>