I am developing a mobile app using phone gap, for CSS i have used Twitter Bootstrap
I need a fixed header on the mobile, the below code does not work and the header is not fixed.
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li>some thing </li>
<li><a href="abc"><i class="icon-search icon-white"></i>
</a></li>
<li><i class="icon-home icon-white"></i>
</li>
<li><i class="icon-time icon-white"></i>
</li>
</ul>
</div>
</div>
</div>
I saw the below article, it says navbar-fixed-top does not work for mobile devices
any suggestion how could i get a fixed header,
Related
I am developing an app with the MEAN stack...and the question is...
How can I divide the interface of my app?
I have a static page(such a webpage) and an application page, the interface is different but the development that I have followed is...
In the file 'index.js' of my app, where I put all the dependencies and set the . In this file I have set the header and the footer of the static page for not repeat it in all the html files. It is working when I navegate above the static page, but when I am developing the app-page I want to change the main interface.
So, Must I repeat the code? or Can I set directives like ng-show to show each interface in each situation?
There I show you the mockups of my app:
Static:
Application:
The body target of my 'index.js' file:
<body>
<script>
$(document).ready(function(){
$('.button-collapse').sideNav();
});
</script>
<!-- The var changeInterface control if we are on main page or app page-->
<header>
<nav class="dipu-green">
<div class="nav-wrapper container" role="navigation">
<a id="logo-container" href="#" ui-sref="/()" class="" style="color:white" >
<b>R.U. Pino Montano</b>
</a>
<ul class="right hide-on-med-and-down">
<li>
<a href="#!/" style="color:white" >Inicio</a>
</li>
<!--data-activates="reportsDropdown" dropdown-button -->
<li>
<a href="#!/news" style="color:white">
Noticias</a>
</li>
<li>
<a href="#!/info" style="color:white">
Información</a>
</li>
<li>
<a href="#!/team" style="color:white">
Equipo</a>
</li>
<li>
<a href="#!/services" style="color:white">
Servicios</a>
</li>
<li>
<a href="#!/contact" style="color:white">
Contacto</a>
</li>
<li>
<a href="#!/app" style="color:white">
Resi App</a>
</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>
<a href="#!/">
<i class="material-icons">mood</i>Inicio</a>
</li>
<!--data-activates="reportsDropdown" dropdown-button -->
<li>
<a href="#!/news">
<i class="material-icons">new_releases</i>Noticias</a>
</li>
<li>
<a href="#!/info">
<i class="material-icons">info</i>Información</a>
</li>
<li>
<a href="#!/team">
<i class="material-icons">people</i>Equipo</a>
</li>
<li>
<a href="#!/services">
<i class="material-icons">business</i>Servicios</a>
</li>
<li>
<a href="#!/contact">
<i class="material-icons">contact_mail</i>Contacto</a>
</li>
<li>
<a href="#!/app">
<i class="material-icons">exit_to_app</i>Resi App</a>
</li>
</ul>
<a href="#" data-activates="nav-mobile" style="color:white" class="button-collapse">
<i class="material-icons">menu</i>
</a>
</div>
</nav>
</header>
<main>
<div class="ribbon">
<span>BETA</span>
</div>
<!-- el controlador se añade a una parte del body-->
<div class="section">
<div ui-view></div>
</div>
</main>
<footer class="page-footer dipu-green">
<div class="container">
<div class="row dipu-green">
<div class="col s12">
<div>
<h5>Contacto</h5>
<ul>
<li><i class="tiny material-icons">location_on</i> Avda. Alcalde Manuel del Valle nº 28</li>
<li>41008, Sevilla (España)</li>
<li><i class="tiny material-icons">account_balance</i> C.I.F.: XXXXX </li>
<li><i class="tiny material-icons">local_phone</i> Tel: XXX XXX XXX</li>
<li><i class="tiny material-icons">email</i> rupinomontano#gmail.com</li>
<li><i class="tiny material-icons">web</i> rupinomontano.com</li>
</ul>
</div>
</div>
<div class="col s12">
<div>
<h5>Desarrollo</h5>
</div>
</div>
<div class="col s12">
<h5>Síguenos en</h5>
<div id="social">
</div>
</div>
</div>
</div>
<div class="footer-copyright">
<span style="margin-left:15%;">© 2018 Developed by </span>
</div>
</footer>
</body>
Thank you in advance!
As you are using angularjs, you can create a single page application.
answering to your qustions
Q: Must I repeat the code?
Ans - in angularjs you should not repeat your code, you maintain common part in one page and from that page you can render to diffrent page. this the beauty of single page application. to create a single page application you need routing. to achive routing in angular js you can use angular router package or you can use UI Router package.
please chack this example for angular router : https://www.journaldev.com/6225/angularjs-routing-example-ngroute-routeprovider
please chack this example for UI router : https://scotch.io/tutorials/angular-routing-using-ui-router
Q: Can I set directives like ng-show to show each interface in each situation?
Ans - you should use routing directive. from these directive you can navigate to different page without reloading pages again again.
I am using AngularJs and Bootstrap. While I am using $RouteProvider for SPA, I am using bootstrap for the layout. This is working fine.
However, I am now trying to use Bootstrap nav-tabs to have tab based navigations.
My HTML is like this:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<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="#/mis"><i class="fa fa-tachometer"></i> TrigonMeter</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="navbar" class="navbar-collapse collapse">
<ul id="tabs" class="nav navbar-nav nav-tabs container-fluid" data-tabs="tabs">
<li class="active"><a data-target="#db" href="#db" data-toggle="tab">Dashboard</a></li>
<li><a data-target="#admin" href="#admin" data-toggle="tab">Admin</a></li>
<li><a data-target="#mis" href="#mis" data-toggle="tab">MIS</a></li>
<li><a data-target="#fin" href="#fin" data-toggle="tab">Finance</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-link">Hi {{globals.currentUser.username}}</li>
<li><span class="glyphicon glyphicon-log-out"></span>Logout</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
For the tabs. This works fine. And the following is the tab-content section:
<div class="container-fluid">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class="row">
<div id="my-tab-content" class="tab-content col-sm-2 col-md-2 sidebar">
<div class="tab-pane active" id="db">
<h1>Dashboard</h1>
<ul>
<li>Organisation Details</li>
<li>Job Numbers</li>
<li>Job Expenses</li>
<li>Job Financial Details</li>
<li>Contracts</li>
</ul>
</div>
<div class="tab-pane" id="admin">
<h1>Admin</h1>
<p>Organisation Details</p>
</div>
<div class="tab-pane" id="mis">
<h1>MIS</h1>
<ul>
<li>Job Numbers</li>
<li>Job Expenses</li>
<li>Job Financial Details</li>
<li>Contracts</li>
</ul>
</div>
<div class="tab-pane" id="fin">
<h1>Finance</h1>
<p>orange orange orange orange orange</p>
</div>
</div>
<div class="col-sm-10 col-md-10">
<div ng-view></div>
</div>
</div>
</div>
But The tab-content section is not working.
Please do let me know if I could explain the problem.
Is there a way to do this?
I'm trying to use the mobile collapse navbar in Materialize CSS http://materializecss.com/navbar.html with UI router. But the hamburger? (menu 3-stripe) won't show the menu when I click on it
<i class="material-icons">menu</i>.
Is there a way to modify this so I can put this nav in the main page and have ui-router just load the partial pages?
I had the same issue. To solve it I initialize the JQuery plugin as suggested here: http://materializecss.com/side-nav.html#initialization
Code sample:
<script>
// Initialize collapse button
$(".button-collapse").sideNav();
</script>
<header>
<nav class="light-blue lighten-1" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" ui-sref="home" class="brand-logo">Mi Declaración</a>
<!-- desktop -->
<ul class="right hide-on-med-and-down">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="contact">Contáctanos</a></li>
</ul>
<!-- mobile -->
<ul id="nav-mobile" class="side-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="contact">Contáctanos</a></li>
</ul>
<a href="" class="button-collapse" data-activates="nav-mobile">
<i class="material-icons">menu</i>
</a>
</div>
</nav>
</header>
I have a webapp built with yeoman gulp-angular generator that uses bootstrap (with sass).
I have a collapsable navbar. When I click on the button with the 3 icon-bars, the menu is not displayed as expected.
I've tested my html apart and it works fine. Fiddle that works is: http://jsfiddle.net/7tzj3y5n/.
Code is:
<nav class="navbar navbar-default navbar-inverse navbar-static-top navbar-inverse-main" 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="#navigationbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<p class="navbar-brand">Merchandising Control</p>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-menu" id="navigationbar">
<ul class="nav navbar-nav navbar-right">
<!-- Airline code label -->
<li>Airline:</li>
<!-- Airline code dropdown -->
<li class="dropdown" dropdown>
<a class="dropdown-toggle" dropdown-toggle>{{MainCtrl.getAirlineCode()}} <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-main">
<li ng-repeat="airlineCode in MainCtrl.MAIN_UI_CONSTANTS().airlineCodes" ng-click="MainCtrl.setAirlineCode(airlineCode)">
<a>{{airlineCode.value}}</a>
</li>
</ul>
</li>
</ul>
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container-fluid -->
</nav>
It seems that my installation is not correct.
Could someone help me ?
Regards.
While Bootstrap's js uses data-* attributes on your HTML elements to enable expand / collapse on the navbar, Angular UI Bootstrap (which is what you should be using instead of Bootstrap's js when you have an Angular application) does not work exactly the same way. You can see Angular UI Bootstrap's documentation on Collapse to see how it works, however what you should be doing in short is the following:
Remove Boostrap's js and include Angular UI Bootstrap js an add 'ui.bootstrap' as a dependency of your Angular module (if you haven't already).
Update your HTML to use Angular UI Bootstrap's collapse, ie. something like the following:
<nav class="navbar navbar-default navbar-inverse navbar-static-top navbar-inverse-main" role="navigation" ng-init="navCollapsed = true" >
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-click="navCollapsed = !navCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<p class="navbar-brand">Merchandising Control</p>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-menu" collapse="navCollapsed">
<ul class="nav navbar-nav navbar-right">
<!-- Airline code label -->
<li>Airline:</li>
<!-- Airline code dropdown -->
<li class="dropdown" dropdown>
<a class="dropdown-toggle" dropdown-toggle>{{MainCtrl.getAirlineCode()}} <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-main">
<li ng-repeat="airlineCode in MainCtrl.MAIN_UI_CONSTANTS().airlineCodes" ng-click="MainCtrl.setAirlineCode(airlineCode)">
<a>{{airlineCode.value}}</a>
</li>
</ul>
</li>
</ul>
</div> <!-- /.navbar-collapse -->
</div> <!-- /.container-fluid -->
</nav>
What this code actually does is use the navCollapsed angular variable to control the menu's expand / collapse.
I created a contact form with angularJS and when I try to integrate it in the page that I built with bootstrap, the Navbar dropdowns and the toggle button don't work. How do I fix it in the best and easiest way?
Link To My Code
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-home"></span> Home</li>
<li class="dropdown">
<span class="glyphicon glyphicon-briefcase"></span> Our Product<b class="caret"></b>
<ul class="dropdown-menu">
<li>A Collaborative Solution </li>
<li>A Robust Platform</li>
<li>How It Works</li>
</ul
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> About Us<b class="caret"></b>
<ul class="dropdown-menu">
<li>Our Team</li>
<li>Our Advisory Board</li>
<li>Our Partners</li>
<li>Our Customers</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-list-alt"></span> In the News<b class="caret"></b>
<ul class="dropdown-menu">
<li>Press Releases</li>
<li>Industry News</li>
</ul>
</li>
<li class="active"><span class="glyphicon glyphicon-envelope"></span> Contact Us </li>
</ul>
</div>
</div>
</div>
Thanks for the help!
Don't use Bootstrap's js file and try to avoid jQuery with Angular (jQuery shouldn't be needed). Instead, just include UI Bootstrap and it will add bootstrap's JavaScript functionality as Angular directives.
Include the ui-bootstrap script:
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
then, inject it as a module dependency in your app:
angular.module('myApp', [
'ui.bootstrap'
]);
This will make the Bootstrap components work in your application. Be sure to read the documentation for UI Bootstrap.