I've researched this problem and I still cannot get it to work, when I click the form it closes because of boostrap-dropdown.js. However, I am following this guide to create a login dropbdown on my navbar using bootstrap: Guide, and they have included JS to stop the form from closing, but it is not working for me.
Here is my code:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container"><!-- Collapsable nav bar -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Your site name for the upper left corner of the site -->
<a class="brand"><img name="" src="bglogo.png" alt=""></a>
<!-- Start of the nav bar content -->
<div class="nav-collapse"><!-- Other nav bar content -->
<!-- The drop down menu -->
<ul class="nav pull-right">
<li>Sign Up</li>
<li class="divider-vertical"></li>
<li class="drop down">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
<!-- Login form here -->
<form action="Checklogin.php" method="post" accept-charset="UTF-8">
<input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" />
<input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
and my Javascript that I am inserting in before the close body tag:
<!-- Placed at the end of the document so the pages load faster -->
<script src="twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js"></script>
<script src="twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></script>
<script>
$(function() {
// Setup drop down menu
$('.dropdown-toggle').dropdown();
// Fix input element click problem
$('.dropdown input, .dropdown label').click(function(e) {
e.stopPropagation();
});
});</script>
Thanks!
Edit: The more I think about it, the more I realize it HAS to be a Javscript issue, because the form and the navbar are fine, but when I "click" the dropdown it closes.
You are referencing the wrong container in your js, .dropdown, its supposed to be .dropdown-menu; try this:
JS
$('.dropdown-menu input, .dropdown-menu label').click(function(e) {
e.stopPropagation();
});
Quick tip: you can minimize the number of js calls in your page by using the bootstrap.js pack of scripts instead of loading them one by one.
Related
I have a navbar with a search form, where I get the results from Algolia with their autocomplete solution. This is the navbar:
<nav class="navbar" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div id="nav-icon1" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span></span>
<span></span>
<span></span>
</div>
<a href="{{ url('/') }}">
<img class="logo logo-small" src="{{ asset('/img/logo-small.png') }}" alt="logo">
<img class="logo logo-big" src="{{ asset('/img/m2.png') }}" alt="logo">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form action="/search" method="get" class="navbar-form navbar-search-form active" role="search">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<button type="submit"><i class="ion-ios-search-strong"></i></button>
</span>
<input type="text" id="search-input" name="q" class="form-control" placeholder="Search for videos or players..." value="{{ Request::get('q') }}" autofocus>
</div>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
Sign in
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
On small screens I have a problem, that the results are inside of the navbar dropdown menu
Where I would like them to go over the dropdown menu. I have tried with setting the z-index for various elements of algolia dropdown:
.algolia-autocomplete {
z-index: 999999 !important;
}
But that didn't work, not sure where exactly should I change the z-index, since the element is created on autocomplete so I am not able to see the structure before I type in something. How can I fix that?
The problem was in the bootstrap class:
.navbar-collapse.in {
overflow-y: auto;
}
I had to change it to overflow-y: visible; and then it worked.
I am working on a project which uses Tiles, Struts2 and Bootstrap with our jsp pages. We have a base tiles file tiles.xml which contains the following code.
<definition name="baseLayout" template="/WEB-INF/pages/layout.jsp">
<put-attribute name="title" value="Regulatory Action Tracking" />
<put-attribute name="header" value="/WEB-INF/pages/header.jsp" />
<put-attribute name="navigation" value="/WEB-INF/pages/navigation/mainNav.jsp" />
<put-attribute name='subnav' value='/WEB-INF/pages/navigation/navEmpty.jsp' />
<put-attribute name="content" value="" />
<put-attribute name="footer" value="/WEB-INF/pages/footer.jsp" />
</definition>
This code is used to put the main menu on each page using the code shown below which is contained in mainNav.jsp.
<div id="navigate">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="sr-only">Mobile Menu Button</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<nav id="menu" role="navigation">
<div class="container">
<div class="row">
<div class="navbar-collapse collapse navbar-responsive-collapse" id="navbar-main" style="height: 1px;">
<ul class="nav navbar-nav yamm">
<li>Home</li>
<li>Rules</li>
<li>5 Year Review</li>
<li>Logout</li>
</ul>
</div>
</div>
</div>
My page adds a sub-menu by setting the subnav attribute using the tiles-admin.xml and adminNav.jsp files shown below.
<definition name="employee" extends="baseLayout">
<put-attribute name="title" value="Regulatory Action Tracking, Employee page" />
<put-attribute name='subnav' value='/WEB-INF/pages/navigation/adminNav.jsp' />
<put-attribute name="content" value="/WEB-INF/pages/admin/employeeMaint.jsp" />
</definition>
<nav id="menu" role="navigation">
<section id="subnav" >
<div class="rowNav">
<div class="navbar-collapse collapse navbar-responsive-collapse" id="navbar-main" style="height: 1px;">
<ul class="nav navbar-nav yamm">
<li>Review Admin</li>
<li>Employee Admin</li>
</ul>
</div>
</div>
</section>
The menu and submenu work fine with desktop size screens but when it displays on a mobile size screen Bootstrap only puts the main menu in the "hamburger" menu. Is there a way to include the submenu items in the hamburger responsively? I tagged this with jQuery and javascript because I think I may have to use one of them to fix this. Any help will be appreciated. Thanks!
I found a way to do it with jQuery. I don't know if it is the best way. I put the following code at the top of my page.
<script src="/rat/javascript/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
if ($(window).width() < 768) {
$(".main-menu").append($(".move"));
} else {
$(".sub-menu").append($(".move"));
}
});
$(window).resize(function () {
if ($(window).width() < 768) {
$(".main-menu").append($(".move"));
} else {
$(".sub-menu").append($(".move"));
}
});
</script>
I then added a main-menu class to my main menu.
<ul class="nav navbar-nav yamm main-menu">
Lastly I added a sub-menu class to my sub menu and a move class to each of the elements in the sub menu list.
<ul class="nav navbar-nav yamm sub-menu">
<DNRTags:AccessRoles roleList="System Administrator">
<li class="move">Review Admin</li>
<li class="move">Employee Admin</li>
</DNRTags:AccessRoles>
</ul>
I'm developing this website using twitter Bootstrap 3 as I've done a few times. But in this particular one the navbar, when collapsed, is having an odd behavior. When I click on the toggle button, the list items are displayed first aligned right, without some css styles, and then centered as it should be.
When I hit the close button, something strange happens too, as the toggle button itself floats left for a second and then return to the center as it should be.
I've tried a lot of things here. Rebuilding the menu, deleting some custom css, upgrading/downgrading my jquery...here's a jsfiddle of it, the bug is not exactly the same but it's very close to it:
https://jsfiddle.net/grpaiva/oznL3ogb/
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- You'll want to use a responsive image option so this logo looks good on devices - I recommend using something like retina.js (do a quick Google search for it and you'll find it) -->
<div class="col-md-2"><a class="navbar-brand relative" href="index.html"><img class="logo-header" src="" alt="Descola" /></a></div>
</div>
<div class="dropdown pull-right">
<a class="red" href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="hidden-sm hidden-xs">ENTRE OU CADASTRE-SE </span><b class="caret hidden-sm hidden-xs"></b><span class="glyphicon glyphicon-user hidden-lg hidden-md"></span></a>
<ul class="dropdown-menu">
<li>
<form role="form" method="post" action="" novalidate>
<div class="form-group"><input type="email" class="form-control" name="user_email" value="" placeholder="EMAIL" /></div>
<div class="form-group"><input type="password" class="form-control" name="user_password" value="" placeholder="SENHA" /></div>
<div class="row">
<div class="col-lg-12">
<input type="hidden" name="url" value="" />
<button type="submit" class="btn btn-default" name="">ENTRAR</button>
</div>
</div>
</form>
<div class="clear"></div>
<div class="row">
<div class="col-lg-12">
<p class="pull-left" id="login-over-esqueci">Esqueci minha senha</p>
</div>
</div>
<p class="clear"></p>
<div class="row">
<div class="col-lg-12">
<p id="top-facebook-login"></p><!-- retirei o codigo do facebook -->
<p>Ainda não é um membro?</p>
<p><a class="regular" href="">Cadastre-se aqui</a></p>
</div>
</div>
<div class="row mtop20">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p id="top-login-logout" class="pull-right"><span class="glyphicon glyphicon-off" aria-hidden="true"> </span> Sair</p>
</div>
</div>
</li>
</ul>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse pull-right">
<ul class="nav navbar-nav navbar-right">
<li>o que é a descola?</li>
<li>cursos</li>
<li>drops</li>
<li>contato</li>
<li>faq</li>
<li>para empresas</li>
</ul>
</div><!-- /.navbar-collapse -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div><!-- /.container -->
</nav>
Does anyone have a clue on that one?
I got it!
The problem was in the custom CSS, I had to add the class .collapsing to my li items.
Thanks!
So, if you go to: https://www.waveapps.com/ and click on 'Sign in' you'll get a nice drop down to sign in with.
How might I create something like this? I'm using Twitter Bootstrap, and rather than re-directing the users to a sign-in page I'd like to have a similar drop down to allow users to sign-in. It's simply more appealing.
How might I do this?
Any help would be way cool!!
Cheers!
Try this
HTML
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!-- Collapsable nav bar --> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Your site name for the upper left corner of the site --> <a class="brand">My Site</a>
<!-- Start of the nav bar content -->
<div class="nav-collapse">
<!-- Other nav bar content -->... ...
<!-- The drop down menu -->
<ul class="nav pull-right">
<li>Sign Up
</li>
<li class="divider-vertical"></li>
<li class="dropdown"> <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
<form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
<input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" />
<input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" />
<input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
<label class="string optional" for="user_remember_me">Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
Script
$(function () {
// Setup drop down menu
$('.dropdown-toggle').dropdown();
// Fix input element click problem
$('.dropdown input, .dropdown label').click(function (e) {
e.stopPropagation();
});
});
DEMO
You could use Bootstrap's popover or Modal features.
See docs here
Simply position a div above the viewable window, for example if it is 200px high, give it a css top value of -80px so the bottom of it is just at the top of your screen, then when hovered animate the div into view.
#loginbox {
top:-80px;
width:600px;
height:100px;
}
and
$('#loginbox').hover(function() {
$(this).stop().animate({'top', '0px'}, 1000
}, function() {
$(this).stop().animate({'top', '-80px'},750
});
I am having great difficulty finding out why my MVC Bootstrap Menus don't work on a page with the TinyMCE HTML editor (I'm using ASP.Net MVC, the TinyMCE plugin, but just showing the generated HTML below).
What I'm looking for, is some way of finding conflicts between TinyMCE and the script to make the drop down menus work in Twitter Boostrap.
It should show:
... when I hover over Properties, however, when I have the TinyMCE editor on the page, the hover drop down does not work:
My generated HTML is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Edit</title>
<link href="/content/css?v=MUk2LfSuGyP1dibrYRROgQuE_irzerGsrA5KYasVO_U1" rel="stylesheet" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#" title="Flexible Group Booking System">Flexible Group Booking System</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown"><a href='#' class='dropdown-toggle' data-toggle='dropdown'>Properties <b class='caret'></b></a>
<ul class="dropdown-menu">
<li>Property List</li>
</ul>
</li>
<li class="dropdown"><a href='#' class='dropdown-toggle' data-toggle='dropdown'>Room Types <b class='caret'></b></a>
<ul class="dropdown-menu">
<li>Room Type List</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<form action="/email/Edit" method="post">
<input name="__RequestVerificationToken" type="hidden" value="mFXxdzlDHBlUyPia3kwCvb1" /><fieldset>
<div class="editor-label">
<label for="EmailBody">EmailBody</label>
</div>
<div class="editor-field">
<script src="/Scripts/tinymce/jquery.tinymce.js" type="text/javascript"></script>
<script type="text/javascript">
(function () {
$(function () {
$('#EmailBody').tinymce({
// Location of TinyMCE script
script_url: '/Scripts/tinymce/tiny_mce.js',
theme: "advanced",
height: "300",
width: "790",
verify_html: false
});
});
})();
</script>
<textarea length="1418" cols="20" data-val="true" data-val-required="The EmailBody field is required." id="EmailBody" name="EmailBody" rows="2">
</textarea>
</div>
<p class="form-actions">
<input type="submit" value="Save" class="btn btn-primary" />
</p>
</fieldset>
</form>
</body>
</html>
There are no javascript errors showing in either IE or Chrome.
How else can I troubleshoot where the conflict is, and try to resolve it?
Thank you,
Mark
It looks like a possible conflict between 2 different versions of jQuery at the same time:
<script src="/Scripts/jquery-1.9.1.js"></script>
and TinyMCE's custom jquery library:
<script src="/Scripts/tinymce/jquery.tinymce.js" type="text/javascript"></script>
Try this solution to load TinyMCE BEFORE jQuery:
<script type="text/javascript" src="tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
tinyMCE.init({ mode : "none"});
</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('textarea.tinymce').tinymce({
theme : "simple",
script_url : 'tiny_mce/tiny_mce.js',
});
});
</script>