I have searched a lot about the problem before posting here, Not found any solution.
Link to the website: http://bit.ly/1geHJr0
I'm using Twitter bootstrap 2.3.2 and included a form in the dropdown menu. Everything working fine on desktop browsers. On Mobile browser when i click login link in the nav opens login form but it's closing when i click on any field or button in the from, User not able to enter any information as it is closing.
Here is my part of code for the navigation menu
<li class="dropdown" id="menuLogin"> <a class="dropdown-toggle btn" href="login" data-toggle="dropdown" id="navLogin"><i class="icon-lock"></i> Login</a>
<div class="dropdown-menu span3" style="background:#0C0;">
<form method="post" action="<?php echo base_url().'login';?>" id="login">
<div class="control-group">
<input type="text" name="login_email" id="login_email" value="" placeholder="Email" class="span3" /> <?php echo form_error('login_email')?>
</div>
<div class="control-group">
<input type="password" name="login_password" id="login_password" value="" placeholder="password" class="span3"/> <?php echo form_error('login_password')?>
</div>
<div class="control-group">
<div class="text-left" style="padding-left:8px;">
<input type="submit" class="btn" name="login" value="Login" style="background-color: #3498DB;" />
<a href="<?php echo base_url().'forgot_password';?>">Forgot Password?</a>
</div>
</div>
</form>
</div>
</li>
I tried below code but no luck
<script>
$('.dropdown-menu input, .dropdown-menu button').on('click', function(e) {
e.stopPropagation();
});
</script>
Thanks
I figured out the problem and fixed this issue.
Issue was i have used div instead of ul for the drop down. It's closing when you click other than ul.
I just replaced this
<div class="dropdown-menu span3" style="background:#0C0;">
With ul > li
<ul class="dropdown-menu span3" style="background:#0C0;">
<li>
<form....
</li>
</ul>