I'm trying to set up EmberJS. This is my first website attempting this so please excuse my noobness. Currently nothing is outputting to the screen but the body's grey background color. I'm not sure where I went wrong in setting up my EmberJS page.
Here's the code and if you need to see it in action you can view it here http://andrewhnovak.com/newSite/index.html
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Site Demo</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/mainPage.css">
</head>
<body>
<script type='text/x-handlebars' data-template-name='application'>
<div class="container">
<div class="header">
<div class='col-md-1'>
Logo
</div><!--end header container-->
<div class='col-md-2 col-md-offset-1'>
<div class='link1'>
Link1
</div>
</div>
<div class='col-md-3'>
<div class='link2'>
Link2
</div>
</div>
<div class='col-md-2'>
<div class='link3'>
Link3
</div>
</div>
<div class='col-md-2'>
<div class='searchBar'>
<input type="text" class="form-control" placeholder="Search Box">
</div>
</div>
<div class='col-md-1'>
<div class='searchButton'>
<button class="btn btn-search" type="submit">Search</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class='underHeader'>
</div>
</div>
<div class="container">
<div class='whiteBox'>
<div class='newProducts'>
</div>
{{outlet}}
</div>
</div>
</script>
<script type='text/x-handlebars' data-template-name='index'>
<h1>Testing the page</h1>
</script>
</body>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<!--<script src="js/jquery.easing-1.3.js"></script>-->
<script src="js/bootstrap.js"></script>
<script src="js/menu.js"></script>
<script type="text/javascript" src="js/libs/handlebars-v2.0.0.js"></script>
<script type="text/javascript" src="js/libs/ember-1.9.1.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</html>
CSS
var App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return ['red', 'yellow', 'blue'];
}
});
Looks like from checking the JavaScript console that you’re missing jQuery.
Related
To test modal creations in python with django I created a test app named modalTestApp.
Then I copied this html that I got off of the bootstrap website and pasted it into the main.html inside the app, without changing it. The webpage from the app loads fine but clicking the button to preview the modal does nothing. What am I doing wrong here?
main/base.html:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<script src={% static "jquery/jquery-3.3.1.slim.min.js" %}></script>
<script src={% static "jquery/jquery.min.js" %}></script>
<script type="text/javascript" src={% static 'tablesorter-master/js/jquery.tablesorter.js' %}></script>
<script src={% static "bootstrap-4.3.1-dist/js/popper.min.js" %}></script>
<script src={% static "bootstrap-4.3.1-dist/js/bootstrap.min.js" %}></script>
<style type="text/css">
.main {
margin-top: 50px;
padding: 10px 0px;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href={% static "bootstrap-4.3.1-dist/css/bootstrap.min.css" %}>
<title>{% block title %} {% endblock title %}</title>
</head>
<body>
<nav class="navbar navbar-dar bg-dark pb-0 pr-0">
<ul class="nav flex-row">
<p class="navbar-brand mb-0 pt-0" style="color: #eee">Weather Data</p>
Home
{% if user.is_authenticated %}
Stations
{% endif %}
</ul>
<ul class="nav justify-content-end">
{% if not user.is_authenticated %}
Register
Login
{% else %}
logout
Profile
{% endif %}
</ul>
</nav>
{% block content %}
{% endblock content %}
</body>
</html>
main.html:
{% extends "main/base.html" %}
{%block content %}
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
{% endblock content %}
EDIT:
console output + webpage preview (same before and after button clicked):
I think that you do not need to write the script tag, you need to write how it is done in the bootstrap documentation - https://getbootstrap.com/docs/5.1/getting-started/introduction/#starter-template
Just as example
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
You also need to see the django documentation on how to insert static files, this will help you use your pictures, styles, javascript - https://docs.djangoproject.com/en/3.2/howto/static-files/
Also, just as example
settings.py (Root setting)
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/
STATIC_URL = "/static/"
STATICFILES_DIRS = [str(BASE_DIR.joinpath("static"))]
urls.py (root urls)
urlpatterns = [
path("admin/", admin.site.urls),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
It seems like the problem is the template file is not fetching right css and js or may be your directory is not correct. Check my code below its working fine. Thanks
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I found an example how to copy text to clipboard with ZeroClipboard. However, I tried to convert the original code to flask and I run into TemplateSyntaxError: expected token 'end of statement block', got 'onload' because of {% block body onload="init();"%}. How is it possible to use onload="init();" with Jinja?
Here is app.py
#app.route("/table/", methods=["GET"])
def table():
return render_template('table.html')
Here is base2.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>flask-bootstrap example</title>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='bootstrap/css/bootstrap.css')}}" >
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="https://gitcdn.github.io/bootstrap-toggle/2.1.0/css/bootstrap-toggle.min.css" >
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='web.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='tooltip.css') }}">
<style>
.clip_button {
background:#063;
padding:4px;
width:100px;
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="{{ url_for('index') }}">test</a>
</div>
<!--/.navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li id="home-url">Home</li>
<li id="about-url">About</li>
<li id="contact-url">Contact</li>
</ul>
<!--/.navbar-nav -->
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
</div>
<!--/.navbar -->
<div class="container">
{% block body %}{% endblock %}
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="{{url_for('static', filename='bootstrap/js/bootstrap.js')}}"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="https://gitcdn.github.io/bootstrap-toggle/2.1.0/js/bootstrap-toggle.min.js"></script>
<script type="text/javascript" >
$("a.my-tool-tip").tooltip();
$('.selectpicker').selectpicker();
$("#reference_select").selectpicker("refresh");
</script>
<script type="text/javascript" src="{{url_for('static', filename='ZeroClipboard/ZeroClipboard.js')}}"></script>
<script language="JavaScript">
////copy to clip
var clip = null;
function $(id) { return document.getElementById(id); }
function init()
{
clip = new ZeroClipboard.Client();
clip.setHandCursor( true );
}
function move_swf(ee)
{
copything = document.getElementById(ee.id+"_text").value;
clip.setText(copything);
if (clip.div)
{
clip.receiveEvent('mouseout', null);
clip.reposition(ee.id);
}
else{ clip.glue(ee.id); }
clip.receiveEvent('mouseover', null);
}
</script>
<script type="text/javascript">
{% block js %}{% endblock %}
</script>
</body>
</html>
Here is the (table.html):
{% extends 'base2.html' %}
{% block body onload="init();"%}
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table">
<tbody>
<tr>
<td><input type='text' id='textid5_text' value='your text 5' /></td>
<td><div id='textid5' onload="init();" onMouseOver='move_swf(this)' class='clip_button'>COPY</div></td>
</tr>
</tbody>
</table>
</div>
</div>
{% endblock %}
onload is an HTML attribute. It has nothing to do with Jinja. You can simply place it right on your <body> tag.
<body onload="init();">
If you don't need it in every page where you use this base template, you'll need to add a block inside the <body> tag
<body {% block body_attrs %}{% endblock %}>
And then override it in your child template
{% block body_attrs %} onload="init();" {% endblock %}
Is it impossible to have a orbit slider and a clearing lightbox within?
So that I can slide the image carousel and when I click or tab on a image the lightbox opens? So what can I do to force it?
<!doctype html>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/default.css" type="text/css" media="screen" />
<script src="js/modernizr.js"></script>
<script src="js/jquery.js"></script>
</head>
<body>
<div class="row">
<div class="small-12 columns">
<div class="orbit-container">
<ul class="example-orbit clearing-thumbs" data-orbit data-clearing>
<li>
<a href="img/galerie/tattoo/colored/col.jpg">
<img src="img/galerie/tattoo/colored/col.jpg" alt="slide 1" />
<div class="orbit-caption">
Caption One.
</div>
</a>
</li>
<li>
<a href="img/galerie/tattoo/colored/col2.jpg">
<img src="img/galerie/tattoo/colored/col2.jpg" alt="slide 2" />
<div class="orbit-caption">
Caption Two.
</div>
</a>
</li>
<li>
<a href="img/galerie/tattoo/colored/col3.jpg">
<img src="img/galerie/tattoo/colored/col3.jpg" alt="slide 3" />
<div class="orbit-caption">
Caption Three.
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/function.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.orbit.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
my js file to handle the slider crash the slider. syntax fail?
$(document).foundation({
orbit: {
animation: 'slide',
navigation_arrows: true,
slide_number: false,
bullets: false,
timer: false,
variable_height: false,
swipe: true
}
});
I am new in EmberJS and flowing on www.codeschool.com the Warming Up With Ember.js ...
I am stuck at level 1.4 Named Template, They ask me to: Move the content unique to our homepage into a new template and give it a template name that will be shown on the homepage of our site.
for this code,
<!DOCTYPE html>
<html>
<head>
<base href='http://courseware.codeschool.com/ember/' />
<link href='bootstrap.css' rel='stylesheet' />
<link href='application.css' rel='stylesheet' />
<script src='jquery.js'></script>
<script src='handlebars.js'></script>
<script src='ember.js'></script>
<script src='ember-data.js'></script>
<script src='app.js'></script>
</head>
<body>
<script type='text/x-handlebars' data-template-name='application'>
<div class='navbar navbar-default'>
<div class='container'>
<a href='#' class='navbar-brand'><img src='images/logo.png' alt='logo' height='34' width='224' /></a>
<ul class='nav navbar-nav navbar-right'>
<li href='#' class='active'>Home</li>
<li href='#/about'>About</li>
</ul>
</div>
</div>
<div class='container'>
<h1>Welcome to The Flint & Flame!</h1>
</div>
<footer class='container'>
<hr />
<p class='pull-left'>© 2013 The Flint & Flame</p>
<p class='pull-right'><a href='#/credits'>Credits</a></p>
</footer>
</script>
</body>
</html>
I did it but it still don't work after trying this:
<!DOCTYPE html>
<html>
<head>
<base href='http://courseware.codeschool.com/ember/' />
<link href='bootstrap.css' rel='stylesheet' />
<link href='application.css' rel='stylesheet' />
<script src='jquery.js'></script>
<script src='handlebars.js'></script>
<script src='ember.js'></script>
<script src='ember-data.js'></script>
<script src='app.js'></script>
</head>
<body>
<script type='text/x-handlebars' data-template-name='application'>
<div class='navbar navbar-default'>
<div class='container'>
<a href='#' class='navbar-brand'><img src='images/logo.png' alt='logo' height='34' width='224' /></a>
<ul class='nav navbar-nav navbar-right'>
<li href='#' class='active'>Home</li>
<li href='#/about'>About</li>
</ul>
</div>
</div>
<div class='container'>
<script type='text/x-handlebars' data-template-name='index'>
<h1>Welcome to The Flint & Flame!</h1>
</script>
</div>
<footer class='container'>
<hr />
<p class='pull-left'>© 2013 The Flint & Flame</p>
<p class='pull-right'><a href='#/credits'>Credits</a></p>
</footer>
</script>
</body>
</html>
You forgot to add an outlet to your application template and you nested your index template inside your application template, which is wrong.
<!DOCTYPE html>
<html>
<head>
<base href='http://courseware.codeschool.com/ember/'/>
<link href='bootstrap.css' rel='stylesheet'/>
<link href='application.css' rel='stylesheet'/>
<script src='jquery.js'></script>
<script src='handlebars.js'></script>
<script src='ember.js'></script>
<script src='ember-data.js'></script>
<script src='app.js'></script>
</head>
<body>
<script type='text/x-handlebars' data-template-name='application'>
<div class='navbar navbar-default'>
<div class='container'>
<a href='#' class='navbar-brand'><img src='images/logo.png' alt='logo' height='34' width='224'/></a>
<ul class='nav navbar-nav navbar-right'>
<li href='#' class='active'>Home</li>
<li href='#/about'>About</li>
</ul>
</div>
</div>
{{outlet}}
</script>
<script type='text/x-handlebars' data-template-name='index'>
<div class='container'>
<h1>Welcome to The Flint & Flame!</h1>
</div>
<footer class='container'>
<hr/>
<p class='pull-left'>© 2013 The Flint & Flame</p>
<p class='pull-right'><a href='#/credits'>Credits</a></p>
</footer>
</script>
</body>
</html>
My navbar is supposed to collapse to a select-list when the screen is resized below threshold. It works for my home page, but not for the others, i.e. on other pages besides home page, when the screen is resized until the sites collapsed, the navbar disappears completely (the select-list element that's supposed to be there is not there). I have a submenu below my navbar, and it collapses just fine. I wonder what's the problem? Could it be scripts conflict (but collapse is bootstrap css right)?
My navbar is of class navbar, with a logo of tag at the left and for the link buttons.
I use jQuery and django alongside bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<!--
<link rel="stylesheet" type="text/css" href="/static/global.css">
-->
<link rel="stylesheet" type="text/css" href="/static/smoothness/jquery-ui-1.10.0.custom.min.css">
<link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.min.css">
<!--[if ie]><meta content='IE=8' http-equiv='X-UA-Compatible'/><![endif]-->
<link href="/static/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<!--link href="/static/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"-->
<link href="/static/bootstrap/css/paralax.css" rel="stylesheet" type="text/css">
<link href="/static/bootstrap/css/main.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<link href="css/ie.css" rel="stylesheet"/>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->
<script src="/static/bootstrap/js/modernizr.custom.js"></script>
<script src="/static/js/jquery-1.9.0.js"></script>
<script src="/static/js/jquery-ui-1.10.0.custom.min.js"></script>
<script src="/static/bootstrap/js/jquery.scrolltotop.js"></script>
<script src="/static/bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="/static/highcharts-3/js/highcharts.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/bootstrap/js/superfish.js"></script>
<title>CoAssets Platform (BETA)</title>
</head>
<body>
<!--div class="container-fluid"-->
<div class="row-fluid">
<div class="span12" id="topmenu">
{% block topmenu %}{% endblock %}
</div>
</div>
<div class="row-fluid" style="background-color:#ffad37">
<div class="span12" id="submenu" style="padding-top:2px; padding bottom:2px">
<ul class="nav nav-pills">
{% block submenu %}{% endblock %}
<li class="pull-right"><a class="btn" href="/account/logout" style="font-size: 16px; font-family: 'PT Sans', sans-serif; text-align: center;">Logout</a>
<li class="pull-right">Account</li>
</ul>
</div>
</div>
<!--/div-->
<!--div class="container-fluid"-->
<div class="row-fluid">
<div class="span12" id="main">
{% block main_body %}{% endblock %}
</div>
</div>
<!--/div-->
</br>
<div class="container-fluid" id="copyright">
<div class="row-fluid">
<div class="span4">
<p>Legalise</p>
<p>Contact Us</p>
</div>
<div class="span4">
<p>Partners</p>
<p>FAQ</p>
<p>Definitions</p>
</div>
<div class="span4">
<p>Admin</p>
</div>
</div>
<div class="row-fluid" id="copyright">
<div class="span12" id="footer">
<p>Copyright of CoAssets.com © 2013</p>
</div>
</div>
</div>
<script>
//script conflicts with some other jQuery scripts, so need to handle this script
jQuery.noConflict();
$(document).ready(function($){
$('.nav li').each(function() {
var currentPath = window.location.pathname;
var thisPath = $(this).children().attr('href');
//alert("sub menu currentPath= "+currentPath+" thisPath= "+thisPath);
$(this).removeClass('active');
if (thisPath == currentPath && !$(this).hasClass('active')) {
$(this).addClass('active');
};
});
$('#menu li').each(function() {
var currentPath = window.location.pathname;
var thisPath = $(this).children().attr('href');
var len = thisPath.length;
//alert("top menu currentPath= "+currentPath+" thisPath= "+thisPath);
$(this).removeClass('active');
if (thisPath != '/' && thisPath == currentPath.substring(0,len)
&& !$(this).hasClass('active')) {
$(this).addClass('active');
} else if (thisPath=='/' && currentPath == '/')
{
$(this).addClass('active');
};
});
});
</script>
</body>
</html>
{% extends "base.html" %}
{% block topbar %}
{% endblock %}
{% block topmenu %}
<section class="navbar">
<div class="navbar-inner main-menu">
<div class="row-fluid">
<div class="span2">
<img src="/public_media/index_01 edited4.png" alt="">
</div>
<div class="span10">
<nav id="menu" class="pull-right" >
<ul>
<li class="active">Home<br/><span>CoAssets</span></li>
<li>News</li>
<li>Portfolio</li>
<li>Opportunities</li>
<li>New Opportunities</li>
<li>Transaction</li>
<li>Research</li>
<!--li>Account</li-->
<!--li>Admin</li-->
</ul>
</nav>
</div>
</div>
</div>
</section>
{%comment%}
<div class="label label-warning offset2">
<p>CoAssets Beta</p>
</div>
{%endcomment%}
{% endblock %}
Using bootstrap 3.0, navbar-inner is no longer a class, and in my case, when experiencing this issue, removing that class resulted in the correct behavior.
<nav class="navbar" role="navigation">
<div class="container">
<div class="navbar navbar-inverse ">
<!-- Brand and toggle get grouped for better mobile display -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapsing-nav">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="collapsing-nav">
<ul class="nav navbar-nav">
<!-- dropdown items go here -->
</ul>
</div>
</div><!--/.navbar -->
</div><!-- /.container -->
</nav>
alternatively, you could add the following into your style declarations to self-support this
.navbar-inner {
min-height: 50px;
}
The issue is cause by a combination of things:
no text in navbar when in collapsed mode (most common is navbar-brand item)
this leaves on floated elements in the layout
removal of navbar-inner class from the bootstrap library
the dev team fixed this here, however there are a lot of example pieces of code out there where users who needed to use a nav inside of a .container, and recommended using .navbar-inner... which no longer exists.
The use of that non-existent class throws off your css because bootstrap compiles the css from less, and that property is assigned to the .navbar property, but not .navbar-inner, so basically the min-height property does not wind up being assigned assigned to your navbar, and you're left with no height on the nav, no text to give the element a calculated height, and only floating elements that are outside of the flow and don't get calculated in height computations.
I had a similar problem , but just I added "position:fixed " for container and it works. Try , maybe it works for you.