i'm trying out BootStrap in Djangocms 3.0, and can't get it to work. i created a simple html (code below), which is a composite of a banner from this tutorial, and a simple modal from here. i'm call it through a django view.
when i go to the page, what i see depends on what browser i use. in chrome, i see a black banner and the Bootstrap link, and nothing else (not Home, About, etc.., nor the modal). in IE and Mozilla i see the whole banner, but no modal.
if i comment out the references to the bootstrap css and js files, then everything (all the links and the modal contents) appear, but without any styling, of course. so it seems that i have the {{ STATIC_URL }} correct. it is recognizing the classes, just not displaying them correctly (or at all)?
any ideas? thanks!!
<html>
<head>
<link href="{{STATIC_URL}}css/bootstrap.css" rel="stylesheet">
<link href="{{STATIC_URL}}css/bootstrap-responsive.css" rel="stylesheet">
<script src="{{STATIC_URL}}js/bootstrap.js" type="text/javascript"></script>
</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="/">Bootstrap</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
UPDATE:
i reinstalled djangocms, rebuilt my entire site, and re-populated my DB, and now things display properly in the above example. i can even get a modal dialog to pop up and sort of function. however, it works funny. for example, sometimes, the close button works, and sometimes it doesnt. most of the time, everything on the page after the modal element is unresponsive, though not always. i know this is very vague, but the problems are all over the place, so its hard to describe accurately in less than a book. i feel its a conflict of some sort with django, but besides the imported bootstrap files, i have only two js functions of my own, and very little css at this point.
has anyone had similar problems implementing bootstrap in Djano.
try to save all you static file under :
app_name/static/app_name/
in your html code add:
{% load staticfiles %}
<link href="{% static 'app_name/css/bootstrap.min.css' %}" rel="stylesheet">
and check for static filemore information
Related
I have a problem with Flatpickr rendering in a Bootstrap modal.
When I open a Flatpickr entry within a modal, everything seems to work fine except for entering a year. When I want to click on the year, the input field does not work.
Thanks for help.
Flatpickr version 4.6.9 and Bootstrap version 5.1.1
In order to use the month and year picker you need to use the Flatpickr option static: true. This way it will not hide behind the modal.
$(document).ready(function() {
const flatpickr_time = $('#flatpickr_time').flatpickr({
//static: position the calendar inside the wrapper and next to the input element*.
static: true
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.js"></script>
<div class="container">
<div class="row justify-content-center">
<div class="col-4 m-5">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch modal</button>
</div>
</div>
</div>
<!-- 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">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<input id="flatpickr_time" style="width:200px;">
</div>
</div>
</div>
</div>
I've had the same issue and while the solution proposed by Crezzur did work, it had some side effects that I didn't want.
I was able to find that the issue was caused by bootstrap being a bit too aggressive with the focus, which means it can be fixed simply by adding bs-focus="false" to your modal.
Example:
<div class="modal" role="dialog" data-bs-focus="false">
I have Problem when trying to make Bootstrap Modals to show PDF Document using <embed src="./pdfFiles.pdf"></embed> Tag. I am using Bootstrap Version 4.5
When user click the button to trigger the modals, Bootstrap modals normally displays PDF document. But, The problem appear when user close the modals and show it again. instead of displaying PDF Document, modals displays blank document.
EDITED
My Code Shown below.
Bootstrap CDN
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<title>PDF Show</title>
Show the modal
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">PDF Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<embed src="http://localhost/pdfFile.pdf"></embed>
<embed src="http://192.168.0.13/pdfFile.pdf"></embed>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I already contained the issue, The PDF Failed to display only when I use the IP address (or base_url() in Codeigniter) to fill pdf link in src="http://192.168.0.1/pdfFile.pdf"
No problem appear when I use http://localhost/pdfFile.pdf
<embed src="http://localhost/pdfFile.pdf"></embed>
<embed src="http://192.168.0.1/pdfFile.pdf"></embed>
This question already has an answer here:
Modal Form not showing up [duplicate]
(1 answer)
Closed 1 year ago.
I'm trying to learn how to use the bootstrap model. I tried to follow the documentation and some youtube videos and this is what I have:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
</head>
<body>
<button type="button" class="form-text term" data-toggle="modal" data-target="#termsModal">Open Modal</button>
<div class="modal fade" id="termsModal" tabindex="-1" role="dialog" aria-labelledby="termsModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="termsModalLabel">Terms of Use</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Okay</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>
But when I click the Open Modal button, nothing happens. What am I missing?
As explained in the Bootstrap 5 migration docs, the data- attributes have changed to data-bs- in Bootstrap 5.
"Data attributes for all JavaScript plugins are now namespaced to help
distinguish Bootstrap functionality from third parties and your own
code. For example, we use data-bs-toggle instead of data-toggle."
Currently I am learning Django framework, I've decided to get familiar with it by making a simple Blog app, but I've problem with navigation bar, I'm trying to make a responsive navbar, with collapse classes etc. I've searched about this problem in this forum, but nothing helped, so I need personal help if possible. That's my code, please note that I did include bootstrap and bootstrap's javascript plugin. Thanks in advance.
How this navbar works: http://scr.hu/28mo/ncxtp
<div class="navbar-wrapper">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">MyBlogName</a>
</div>
<div class="collapse navbar-collapse" id ="navbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
</div>
Collapse needs some Javascript to work properly. You should add it to your template. Quick and dirty with script tags in your posted template. Later read about staticfiles and how to ship them with your app. There is also a quite useful example here: Include CSS and Javascript in my django template
Do you know how to force django bootstrap toolkit to be responsive? I mean e.g the change of navbar when width is small.
I have in base.html:
{% bootstrap_stylesheet_tag %}
{% bootstrap_stylesheet_tag "responsive" %}
what is "translated" to when checked in view source of page:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.css">
full base.html content here: https://gist.github.com/andilab/785133e800f023c89689
example rendered # jsfiddle here: http://jsfiddle.net/andilab/4Jqab/
Find here the updated jsfiddle http://jsfiddle.net/4Jqab/1/
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button" 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>
</button>
<a class="brand" href="/"><img src="http://dogspot.dyndns.org/static/lapa_icon.png">dogspot</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Dogs</li>
<li>Form</li>
<li class="dropdown">
Forms<b class="caret"></b>
<ul class="dropdown-menu">
<li>create</li>
<li>contact</li>
<li>Inline</li>
<li>Search</li>
<li>Using template</li>
</ul>
<li>
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form></li>
<li>create</li>
<li>contact</li>
<li>Pagination</li>
<li>Buttons</li>
</ul>
</div>
</div>
</div>
</div>
A couple of things were missed:
A fluid container for the nav
You need to specify the collapsible part of the navbar
A navbar toggle button
See http://getbootstrap.com/2.3.2/components.html#navbar