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>
Related
I have been blocked on this problem for several days. I have bootstrap 3.3.7 in the project root folder. I am rendering some buttons in the django template that should open modal windows when clicked. But the modal functionality is not working. I am following the examples shown on this page:
https://www.quackit.com/bootstrap/bootstrap_3/tutorial/bootstrap_modal.cfm
Here is the template code:
<h6>
<button type="button" class="btn btn-sm" data-toggle="modal" data-target="#smallShoes">
DCCRP 2102
</button>
<!-- The modal -->
<div class="modal fade" id="smallShoes" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="modalLabelSmall">Modal Title</h4>
</div>
<div class="modal-body">
Modal content...
</div>
</div>
</div>
</div>
</h6>
Inside my base.html ... section, I have the following:
{% load static %}
<link rel="stylesheet" href="{% static '/boot/css/bootstrap.css' %}">
<!-- Add additional CSS in static file -->
{% load static %}
<link rel="stylesheet" href="{% static '/custom/custom.css' %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
Thanks!
{% load static %}
<link rel="stylesheet" href="{% static '/boot/css/bootstrap.css' %}">
<!-- Add additional CSS in static file -->
{% load static %}
<link rel="stylesheet" href="{% static '/custom/custom.css' %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
// add this.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Bootstrap modal not showing. i have included all necessary files.
i have tried moving the JS files to before the as well as before but none is working. i tried my code on jsfiddle but could not work too
<!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.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- 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>
open
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
</body>
</html>
The Bootstrap 5 data attributes now use the bs namespace, so to trigger the modal it would be...
open
Also jQuery is not necessary.
Demo
Note: The data-bs- markup is required for all Bootstrap 5 javascript components such as Navbar, Dropdown, Collapse, etc...
I was writing an html page with bootstrap and then I come across some sort of kind of error the navbrand is too long. It takes up a whole lot of space in my navbar at the point when I view it on mobile It takes up a whole line and the hamburger icon goes to the bottom. This problem doesn't occur with text only with images.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Urci</title>
<!-- BOOTSTRAP -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <!-- CSS -->
<!-- CSS -->
<link rel='stylesheet' href="{% static 'home/css/custom.css' %}">
<!-- FONTS -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato&family=Oswald:wght#300&family=Roboto+Condensed&display=swap" rel="stylesheet">
<!-- W3 -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light custom-navbar">
<div class="container-fluid">
<a class="navbar-brand urci-brand" href="{% url 'home' %}"><img class="branding "src="{% static 'home/images/Urci-Logo.png' %}" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav custom-navbar">
<a class="nav-link" href="{% url 'bod' %} ">Board of Directors</a>
<a class="nav-link" href="#">Events</a>
{% if user.is_authenticated %}
<div class="navbar-nav ml-auto">
<a class="nav-link" href="{% url 'announcement:create' %}">Create Announcement</a>
<a class="nav-link" href="#">Create Events</a>
{% endif %}
</div>
</div>
</div>
</div>
</nav>
{% block content %}
{% endblock %}
</body>
</html>
enter image description here
In your home/css/custom.css add the following...
.urci-brand{
width: fit-content !important;
}
This would mean that the width of the anchor tag would be the width of the content within it.
And the !important is used to overwrite some bootstrap styling.
I'm following a tutorial to make websites with Django. I'm currently trying to add a navigation bar using bootstrap CDN but the following appears. The code I am using is posted below.
There is no navigation bar present:
Below is the code is used.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81i\
uXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<title>{% block title %}Newspaper App{% endblock title %}</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="{% url 'home' %}">Newspaper</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
{% if user.is_authenticated %}
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="userMenu"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
{{ user.username }}
</a>
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="userMenu">
<a class="dropdown-item"
href="{% url 'password_change'%}">Change password</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'logout' %}">
Log Out</a>
</div>
</li>
</ul>
{% else %}
<form class="form-inline ml-auto">
<a href="{% url 'login' %}" class="btn btn-outline-secondary">
Log In</a>
<a href="{% url 'signup' %}" class="btn btn-primary ml-2">
Sign up</a>
</form>
{% endif %}
</div>
</nav>
<div class="container">
{% block content %}
{% endblock content %}
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4\
YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/\
1.14.3/
umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbB\
JiSnjAK/
l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/\
js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ\
6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
The site is supposed to display a navigation bar with the users name at the top right.
to use CDN you need active internet connection, here looks like either you are developing offline or your django project does not have access to internet.
if developing offline is your requirement, then you may download those CDN files, then use them.
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.