I have created an application with ionic3 having a side menu.
<ion-menu [content]="content" type="overlay" id="user-menu">
<ion-header no-border>
<ion-toolbar>
<img src="assets/imgs/ic_southend_logo.png" class="width-50 margin-top-10">
</ion-toolbar>
<div class="user-info">
<ion-row>
<ion-col col-3>
<img src="assets/imgs/ic_avatar.png" class="user-image">
</ion-col>
<ion-col col-7>
<div class="padding-top-10">
<label class="user-name"><b>USER1</b></label><br>
<label class="user-designation">Manager</label>
</div>
</ion-col>
<ion-col col-2 text-center>
<img src="assets/imgs/ic_arrow_forward.png" class="arrow-forward">
</ion-col>
</ion-row>
</div>
</ion-header>
<ion-content scroll="true" scrollbar-y="true">
<ion-list no-lines class="padding-top-10">
<button ion-item menuClose detail-none (tap)="openPageTab('ContactsPage')">
<img class="menu-image" src="assets/imgs/ic_contact_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
<h3 class="menu-text" [class.activeHighlight]="checkActive('ContactPage')"> Key Contacts</h3>
</button>
<button ion-item menuClose detail-none (tap)="openPage('BroadcastPage')">
<img class="menu-image" src="assets/imgs/ic_broadcast_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
<h3 class="menu-text" [class.activeHighlight]="checkActive('BroadcastPage')"> Broadcasts</h3>
</button>
<button ion-item menuClose detail-none (tap)="openPage('SettingsPage')">
<img class="menu-image" src="assets/imgs/ic_settings_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
<h3 class="menu-text" [class.activeHighlight]="checkActive('SettingsPage')"> Settings</h3>
</button>
<button ion-item menuClose detail-none (tap)="openPage('KeyinfoPage')">
<img class="menu-image" src="assets/imgs/ic_keyinfo_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
<h3 class="menu-text" [class.activeHighlight]="checkActive('KeyinfoPage')"> Key info</h3>
</button>
<button ion-item menuClose detail-none (tap)="openPage('FaqPage')">
<img class="menu-image" src="assets/imgs/ic_faq_menu.png" [class.activeHighlight]="checkActive('DashboardPage')" />
<h3 class="menu-text" [class.activeHighlight]="checkActive('FaqPage')"> FAQ</h3>
</button>
</ion-list>
</ion-content>
</ion-menu>
The issue here is menuClose is not working after multiple click on the side menu, means side menu is not closing even after touch on the menu.
Is there any solution for this?
Edit
Issues comes when using this.nav.push() there is no issues with this.nav.setRoot()
Thanks and Regards
Anand
try to use (click) instead of (tap) and let me know the feedback
Related
<div id="lastcolumn" class="col-md-3">
<ul class="nav navbar-nav pull-right">
<li class="llogin"><a class="mlogin" data-target="#loginmodal" data-toggle="modal"><span class="glyphicon glyphicon-chevron-down pull-right"></span>Login</a></li>
<div class="modal" id="loginmodal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="Username">Username</label>
<input type="text" name="text" class="form-control">
</div>
<div class="form-group">
<label for="Password">Password</label>
<input type="Password" name="text" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<li class="lsignup"><a class="msignup"><span class="glyphicon glyphicon-chevron-down pull-right"></span>Signup</a></li>
<li class="lcart"><a class="mcart"><span class="glyphicon glyphicon-shopping-cart pull-right"></span>Item</a></li>
</ul>
</div>
</div>
</div>
I want to show bootstrap modal as dropdown under login currently my modal is showing in middle of the screen what i have to do to achieve the desired behaviour, kindly help.enter image description here
Move the .modal div in the li that you want to attach the modal with. Then define position:relative; for that li and position:absolute; for that .modal.
Here's a working snippet. I removed the .modal-backdrop and edited padding and margin for modal. You can ignore them since they are not relevant to the basic problem.
.nav.navbar-nav li{
float:left;
}
.nav.navbar-nav li a.mlogin{
position:relative;
}
div.modal#loginmodal{
position:absolute;
width:200px;
height:300px;
top:30px;
left:0;
padding:0;
margin:0;
}
div.modal#loginmodal .modal-footer{
padding:5px;
margin:0;
}
div.modal#loginmodal .modal-body{
padding:10px 20px;
margin:0;
}
div.modal#loginmodal .modal-header{
padding:5px 20px;
margin:0;
}
.modal-backdrop{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="lastcolumn" class="col-md-3">
<ul class="nav navbar-nav pull-right">
<li class="llogin"><a class="mlogin" data-target="#loginmodal" data-toggle="modal"><span class="glyphicon glyphicon-chevron-down pull-right"></span>Login</a>
<div class="modal" id="loginmodal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="Username">Username</label>
<input type="text" name="text" class="form-control">
</div>
<div class="form-group">
<label for="Password">Password</label>
<input type="Password" name="text" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</li>
<li class="lsignup"><a class="msignup"><span class="glyphicon glyphicon-chevron-down pull-right"></span>Signup</a></li>
<li class="lcart"><a class="mcart"><span class="glyphicon glyphicon-shopping-cart pull-right"></span>Item</a></li>
</ul>
</div>
I am trying to create 2 menus on a page in Ionic2
app.html
<ion-menu [content]="content" side="right" id="menu1">
<ion-content>
<ion-list>
<button ion-item menuClose="menu1" detail-none>
Close Menu 1
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-menu [content]="content" side="left" id="menu2">
<ion-content>
<ion-list>
<button ion-item menuClose="menu2" detail-none>
Close Menu 2
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
hello-ionic.html:
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Hello Ionic</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<p>
<button ion-button color="secondary" menuToggle="left">Toggle Main Menu</button>
</p>
<p>
<button ion-button color="primary" menuToggle="right">Toggle Menu</button>
</p>
</ion-content>
The problem I am facing is that only menu2 is working, menu1 is not appearing. If I delete menu2 than menu1 is working.
Please help
I also have problems like you
And my solution is
file app.html edit like:
<ion-menu [content]="content" side="left" id="menu1">
This is menu 1
</ion-menu>
<ion-menu [content]="content" side="right" type="overlay" id="menu2">
This is menu 2
</ion-menu>
<ion-nav [root]="rootPage" [rootParams]="rootParams" #content swipeBackEnabled="false"></ion-nav>
file app.component.ts
add in constructor() {
...
this.menu.enable(true, 'menu1');
this.menu.enable(true, 'menu2');
}
USING:
PAGE.html
<ion-header>
<ion-navbar color="mytheme">
<button ion-button menuToggle="left" start>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>PAGENAME</ion-title>
<button ion-button menuToggle="right" end>
<ion-icon name="star"></ion-icon>
</button>
</ion-navbar>
</ion-header>
Wish you success :)))))))
i'm really stuck with this problem. Created the next modal .form-inline but the cancel button stays out of the inline, this is the code:
<div id="loginModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login </h4>
</div>
<div class="modal-body">
<div class="form-inline">
<div class="form-group">
<label class="sr-only" for="email">Email Address</label>
<input type="email" class="form-control-input-sm text-center" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="password">Password</label>
<input type="password" class="form-control-input-sm text-center" placeholder="Password">
</div>
<input type="checkbox"><span style="color:#9d9797">Remember me</span>
<button type="submit" class="btn btn-info">Sign In</button>
<button type="button" class="btn btn-default btn-sm"
data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
The picture of it:
The default input max-width is 280px, you can define a class to decrease it, such as
<style>
.input-short {
max-width: 130px !important;
}
</style>
then apply it to the input textboxes
<input type="email" class="form-control input-short" id="email" placeholder="Email">
This should give you what you want (adjust the max-width accordingly).
I created a modal in my form which has a bunch of images for the use to select. However i have no idea on how to select the image as in after I click on it , the modal would close and the image name be shown alongside the modal launch button. This is code I have for now:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Click to launch Image Gallery...
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
{% for image in images %}
<input type="image" src="{{ image.url }}" height="100" width="130" style="padding-right: 3px;padding-bottom: 3px;">
{% endfor %}
</div>
</div>
</div>
</div>
Add a class for image (just for identification and doing some trick)
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Click to launch Image Gallery...
</button>
<div id='div_img_name'> </div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<!-- images added for example purpose-->
<input type="image" src="https://pbs.twimg.com/profile_images/638751551457103872/KN-NzuRl.png" height="100" width="130" style="padding-right: 3px;padding-bottom: 3px;" class="img">
<input type="image" src="https://pennyandjohninoz.files.wordpress.com/2011/10/icons-of-australia-3-sydney-opera-house.jpg" height="100" width="130" style="padding-right: 3px;padding-bottom: 3px;" class="img">
</div>
</div>
</div>
</div>
JavaScript to add
$(".img").click(function(){
$("#div_img_name").text($(this).attr('src'));
$('#myModal').modal('hide') ;
})
I am making a Django application and using Twitter bootstrap carousel template for making a my site. I am planning to provide the sign up and sign in feature to the users through Twitter boostrap 3 modal.
and When I test modal simple with my external templates (not included in Django). My Modal runs well.
Here is my Modal code
<ul class="nav navbar-nav pull-right">
<!-- calling sign up modal -->
<li><a data-toggle="modal" href="#signup"><b>Sign Up</b></a></li>
<!-- calling sign up modal finished -->
<!-- sign up modal -->
<!-- Modal -->
<div class="modal fade" id="signup">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- sign up modal finish -->
</ul>
Correct results
See image below
But when I run this modal from Django application templates. the modal loads but one grey transparent screen also loads over it and it makes the whole page disabled.
See image below
What would be the problem
I solved this issue by defining my modal code outside the ul tags, I put my modal code just after start of the body tag and it worked for me.
This is my code
<!-- Modal 1 -->
<!-- define the sign up modal finished -->
<!-- sign up modal -->
<!-- Modal -->
<div class="modal fade" id="signup">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">TrackLeech Sign Up</h4>
</div>
<div class="modal-body">
<form class="navbar-form form-inline" align="left">
<input type="text" placeholder="username" class="form-control" style="width: 200px;">
<!-- Fb Login --> <div class="fb-login-button pull-right" data-width="400">Login with Facebook</div><!-- Add FB Button Here --> <br><br>
<input type="text" placeholder="email" class="form-control" style="width: 200px;"> <!-- Add Google Button Here --> <br><br>
<input type="password" placeholder="password" class="form-control" style="width: 200px;"> <!-- Add Twitter Button Here --><br><br>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Sign Up</button><br><br>
<a data-toggle="modal" data-dismiss="modal" href="#signin" >Already a member ? Sign In</a>
</form>
<div class="pull-right">
</div>
</div>
<div class="modal-footer">
<!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Sign Up</button>
<a data-toggle="modal" href="#signin" >Already a member ? Sign In</a> -->
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- sign up modal finish -->
This has resolved my issue now.