I am trying to implement Angular js + Bootstrap3 for mobile.
I have added navbar (navbar-fixed-top) in index.html file and there are some forms getting loaded through partials/myfom.html.
When I scroll the page and if a textbox is just behind the navbar, on click of navbar it opens keypad for textbox on mobile.
Can anyone please help me to suppress events of any controll which goes behind navbar after scrolling ?
Code -------
<snap-drawers>
<div snap-drawer="right">
<!-- some content -->
</div>
</snap-drawers>
<snap-content>
<div id="main-mobile-frame">
<div class="app">
<!-- Navbars -->
<nav class="navbar navbar-default navbar-fixed-top my-top-bar" role="navigation">
<span class="head-title">Welcome</span>
<div class="bg-reg-shadow btn-group pull-left top-menu-buttons">
<div class="btn btn-navbar sidebar-toggle" id="menu_bars_id" snap-toggle>
<i class="glyphicon glyphicon-align-justify"></i>
</div>
</div>
<div class="bg-reg-shadow btn-group pull-right top-menu-buttons" yield-to="navbarAction">
<div snap-toggle="right" class="btn btn-navbar" id="right_plus_id">
<i class="glyphicon glyphicon-plus"></i>
</div>
</div>
</nav>
<div class="app-body scrollable">
<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>
</div>
</div>
<ng-view ></ng-view>
</div>
</snap-content>
You have to add a style="margin-top: XXpx;" style to the app-body the same height or more as the nav-bar, however that means you need to explicitly define your nav-bar height - I have not yet discovered a way to make this responsive.
Related
I'm using the Bootstrap 4 theme and I've added a jQuery autocomplete search box to it. The problem I'm having though is the top of the suggest box is showing up behind the nav bar. How can I pull this to forefront? Here's the a working example of the problem: https://jsfiddle.net/phenkels/dwhzdg7b/11/. And a snippet of the HTML code:
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<a class="navbar-brand" href="/">DASHBOARD</a>
</div>
<!-- Start Search Bar -->
<div class="ui-widget nav navbar-nav" id="search-wrapper">
<div class="input-group ">
<input id="tags" placeholder="Search..." autocomplete=off>
</div>
</div>
<!-- End Search Bar -->
</nav>
</body>
Adding this CSS will increase the z-index:
#ui-id-1 {z-index: 9999;}
Fiddle: https://jsfiddle.net/7z7Lj6pw/
Preview
I'm creating a website using Bootstrap and I want to have a floating footer bar for choosing a language, Q&As etc.
But I would like to have a 'hide' button there.
It looks like this:
<div id="footer" class="navbar navbar-default navbar-fixed-bottom">
<div id="innerFooter" class="container-fluid">
<div class="collapse navbar-collapse">
<div class="col-xs-6">
<a class="btn btn-default " data-toggle="collapse" href="#footer" aria-expanded="true" aria-controls="footer">
Hide
</a>
</div>
<div class="col-xs-6">
...some buttons..
</div>
</div>
</div>
</div>
I have two problems with it:
When I hide the bar and I go to another page, that bar pops up
again.
When I click the hide button the first attempt doesn't do
anything, but when I click for the second time, the bar hides.
Thank you for your help!
For the first problem:
You have to store the state of the navbar visibility...
If you don't code it, how the browser could know if it should show or not the navbar... ?
For the second problem
You want to collapse but there is no initial state.
You should had collapse in classes to your navbar
Bootply : http://www.bootply.com/p1xNGxePan
HTML :
<div id="footer" class="navbar navbar-default navbar-fixed-bottom collapse in">
<div id="innerFooter" class="container-fluid">
<div class="collapse navbar-collapse">
<div class="col-xs-6">
<a class="btn btn-default" data-toggle="collapse" href="#footer" aria-expanded="true" aria-controls="footer">
Hide
</a>
</div>
<div class="col-xs-6">
...some buttons..
</div>
</div>
</div>
</div>
I have the below menu + toggle button works great on any browsers on Android but iOS....
I can click on the button then the menu will show up & hide right away after showing.
I used a lot of work-around & fix, disable touchstart in bootstrap.js or changing z-index of navbar. . . but it won't help me anyway with this problem.
The menu seems to show up after click the toggle button but I can't see anything. I have to touch the toggle button again as closing the menu & touch again to open the menu again.
You guy can have a check if you have iPhone at http://getheadsup.com/
Thank you for your concern about my problem.
<div id="header-wrapper" class="header fadeIn">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid row">
<div class="navbar-header">
<a class="navbar-brand" href="index.html#top"></a>
</div>
<div class="navbar-footer">
<a href='order.php' class='navbar-preorder'>PRE ORDER</a>
<!-- hamburger icon -->
<button type="button" class="navbar-toggle collapsed menu-btn">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar top-bar"></span>
<!-- <span class="icon-bar middle-bar"></span>-->
<span class="icon-bar bottom-bar"></span>
</button>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="collapse navbar-collapse main-menu">
<ul class="nav navbar-nav">
<li>
Alexa</li>
<li>
Technology</li>
<li id="spin">
Tech Specs</li>
<li>
FAQ</li>
<li>
Blog</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Take a look at
<div class="collapse navbar-collapse main-menu">
The size is almost nothing, height = 1px.
Since it contains the menu, nothing get displayed.
I don't know what CSS is going in there, but to see it working just set it to overflow: visible
Thats probably a workaround as it might cause issues elsewhere.
To solve it the right way the container need to have its children participating in the layout flow (e.g: not doing position:absolute or float: right/left).
the problem seems to be in the container (div.main-menu). it's positioned as fixed with no height or width.
try to add height and width to it.
#header-wrapper .navbar .container-fluid .navbar-collapse {
height: 100%;
width: 100%;
}
this worked for me.
I had the same issue in iOS and fixed it by changing the button class collapsed to the following jQuery code:
$('your_section_class').toggleClass('collapse')
Spent a few days searching on how i could "edit" the Javascript focus method to work.
What i did was to use a bootstrap fixed navigation bar, in which i had to use padding-top: 70px on the body in CSS so that my body content is not hidden behind the navigation bar.
However if i try to do an focus on a text input due to validation purposes, the focus method focuses on the text input but it is hidden behind the navigation bar.
Navigation Bar code
<!-- Navigation -->
<div class="row">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">C-Tru</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Testing
</li>
<li>
Submissions
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</div>
I was using the following CSS settings
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom CSS -->
<style>
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
In the Body i did the following (modified to make it simple)
<div class="container">
<div class="row">
<form class="form-horizontal">
<div class="col-md-4">
<div class="form-group">
<label for="semester" class="control-label col-xs-3">Date</label>
<div class="col-xs-9">
<input type="input" class="form-control" id="semester" placeholder="eg. yyyymmdd">
</div>
</div>
<div class="form-group">
<label for="testingcode" class="control-label col-xs-3">Test Code</label>
<div class="col-xs-9">
<input type="input" class="form-control" id="testingcode" placeholder="eg. UAT1">
</div>
</div>
<div class="form-group">
<label for="subject" class="control-label col-xs-3">Subject</label>
<div class="col-xs-9">
<input type="input" class="form-control" id="subject" placeholder="eg. Chinese">
</div>
</div>
</div>
</div>
</div>
What happened was that i did a javascript to on focus testing code, however testing code was focused, but i had to scroll up to so that it is no longer hidden behind the navigation bar. (I had alot of other controls in the exact one that i am trying to build so i needed to scroll down)
I looked up the issue and found several other options that people suggested
From Bootstrap css hides portion of container below navbar navbar-fixed-top
Last post, seemed like it had an answer to resizing, but it does not seem to help with the focus portion.
Hope this is not too hard to understand, would try to capture a video and share it so that it could help with my explanation
I have the following code (full source of page):
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<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>
<!-- Be sure to leave the brand out there if you want it shown -->
<span class="brand" href="#">Test</span>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<ul class="nav">
<li class="{% active request "^/$" %}">Home</li>
<li class="{% active request "^/about$" %}">About</li>
</ul>
<form class="navbar-search pull-right">
<input type="text" class="search-query" placeholder="Search...">
</form>
<div class="navbar-form pull-right">
Log in
Sign up
</div>
</div>
</div>
<!-- .nav, .navbar-search, .navbar-form, etc -->
</div>
</div>
When loaded as a desktop, I get this:
Note that the "Log in" and "Sign up" buttons are BEFORE the search bar.
However, when I resize the browser, and the navbar responds I get this:
Now, the "Log in" and "Sign up" buttons are AFTER the search bar. This is because they are pull-right elements.
I've tried wrapping the buttons and search bar in a float: right parent div. This causes them to stay in the right order, but results in them being weirdly off to the side. This is undesirable. Does anyone have a solution that causes their order not to be reversed?
The problem is that the floats on navbar-form and navbar-search are set to none once the nav-collapse logic kicks in. Instead of relying on floats, play around with display: inline-block. The following seems to work reasonably (you should create your own classes instead of applying styles inline):
<div class="pull-right">
<!-- .btn's already have display: inline-block so don't need to apply it manually -->
<!-- margin-left: 15px is applied so that the buttons align with the
search field -->
<a style="margin-left: 15px;" href="#" class="btn">Log in</a>
Sign up
<form class="navbar-form" style="display:inline-block">
<input type="text" class="search-query" placeholder="Search...">
</form>
</div>
Navbar's no longer use .pull-left or .pull-right, but rather .navbar-left and .navbar-right. This avoids issues with specificity due to chaining classes and enables easier styling.
See http://blog.getbootstrap.com/2013/08/13/bootstrap-3-rc2/