I have thoroughly researched this issue already, but all of the solutions are from an older version of Bootstrap, and they didn't help.
My problem is that when I press the button, the modal appears behind the background. All the solutions I've found say that the parent container/modal can't have fixed or relative position. However, my modal doesn't have a parent container and I don't have any custom CSS written for the modal.
I think the problem could be with the fact that I am using Django with this HTML file. Here is the code -
example.html
{% extends 'main/base.html' %}
{% load static %}
{% block title %}Example Title{% endblock %}
{% block fullscreen_content %}
<div id="map-canvas" style="height: calc(100% - 50px); width: 100%;"></div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</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-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
{% endblock %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
base.html
{% load static %}
<!doctype html>
<html>
<head>
<title>{% block title %}{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="{% static 'images/favicon.ico' %}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/4.0.0-beta.2/flatly/bootstrap.min.css"> -->
<link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link href="{% static 'style.css' %}" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
{% block header %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="{% url 'shelter:index' %}">Example</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
{% with 'example example example' as tabs %}
{% for tab in tabs.split %}
<li class="nav-item {% if page == tab %}active{% endif %}">
{{ tab|title }}
</li>
{% endfor %}
{% endwith %}
</ul>
{% if request.user.is_authenticated %}
<ul class="navbar-nav">
<li class="nav-item">
Log out
</li>
</ul>
{% endif %}
</div>
</nav>
{% block fullscreen_content %}{% endblock %}
<div class="container">
<div class="page">{% block content %}{% endblock %}</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
{% block footer %}{% endblock %}
</body>
</html>
I removed/edited sensitive parts in the code or parts that aren't necessary, so there should hopefully be enough to go on. Thanks!
EDIT - Here is a screenshot
In your main CSS file, try setting the z-index of the backdrop to 1, the CSS below might help:
.modal-backdrop{
z-index: 1;
}
If you are comfortable themeing bootstrap in SASS, the following variables will do the trick:
$zindex-modal: 100001;
$zindex-modal-backdrop: 100000;
I did this so that my modal/backdrop would appear above my sticky navbar.
Related
How to apply a stylesheet to a specific nav or div? for instance:
<head>
<meta CharacterSet='UTF-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% endblock %}</title>
{% load static %}
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="{% static 'js/main.js' %}"></script>
{% block script %}{% endblock %}
</head>
<nav id="navbar" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand mb-0" href="#">Pizza</a>
</div>
{% if user is not none %}
<div id="navbar-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
{% block nav_list %}{% endblock %}
</ul>
<form class="navbar-form navbar-right" action="{% url 'logout' %}" method="get">
<span>Welcome, {{ user }}. </span>
<button id="logout" class="btn btn-default btn-sm">Log out</button>
</form>
</div>
{% endif %}
</div>
</nav>
in above code, how to apply "<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">" only to the part of <nav>...</nav>, without affecting the rest of the document.
Problem: CMS-toolbar is hiding Navigation bar menus & it's now disabled(not moving up).
Django version = 3.0.8
Django cms = 3.8.0
I have base template and a home template. Here I am sharing base template code. What should I add to solve the issue?
<!-- this is base template -->
{% load static %}
{% load cms_tags menu_tags sekizai_tags static %} <!--load template libraries of Sekizai and CMS tag -->
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}"> <!-- in case you want other languages -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=""> {% page_attribute "meta_description" %} <!--should have description of pages-->
<meta name="author" content="">
<title>Smart Learn - {% page_attribute "page_title" %} </title> <!--In title page name should come first then website title -->
{% render_block "css" %} <!-- loading css here render_block comes with sekizai lib to allow templates to included-->
<!-- Bootstrap core CSS -->
{% addtoblock "css" %} <!--for sekizai tags -->
<link href="{% static "vendor/bootstrap/css/bootstrap.min.css" %}" rel="stylesheet">
{% endaddtoblock %}
<!-- Custom styles for this template -->
{% addtoblock "css" %}
<link href="{% static "css/smart-learn.css" %}" rel="stylesheet">
{% endaddtoblock %}
</head>
{% cms_toolbar %}<!-- from cms toobar -->
<body>
<!-- Navigation -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="/">Smart Learn</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
{% show_menu 0 100 100 100 %} <!-- for cms menu -->
<li class="nav-item">
<a class="#" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="#" href="services.html">Services</a>
</li>
</ul>
</div>
</div>
</nav>
{% block content %}{% endblock %}
<!-- Footer -->
<footer class="py-5 bg-dark">
{% static_placeholder "Footer" %}
</footer>
<!-- Bootstrap core JavaScript -->
{% addtoblock "js" %}
<script src= "{% static "vendor/jquery/jquery.min.js" %}"></script>
{% endaddtoblock %}
{% addtoblock "js" %}
<script src= "{% static "vendor/bootstrap/js/bootstrap.bundle.min.js" %}"></script>
{% endaddtoblock %}
{% render_block "js" %} <!--to put all js template designs on home -->
</body>
</html>
How can I convert that icon to arrow one which can be moved up and down easily?
This is what I have
This is what I need
Do you have any placeholder tag inside template?
{% block base_content %}
{% placeholder some_content %}
{% endblock %}
If not, navigation bar will be disabled.
I am learning DJANGO and while proceeding wanted to give nice look to some pages. I am currently new in programming (only 4 months coding) and mostly spent time with Python, could find time to properly learn front-end.
So my problem is I can`t center LOGIN block in the page. I am using Bootstrap4.5 and gave some Shadow to make object like floating. I now there were similar questions here with answers and tons of tutorial of centering elements either with custom CSS or Bootstrap Flex or Justify and I really tried almost everything I found with no result. Every time time position of Block is getting somewhere else but not center.
My Base HTML:
<!DOCTYPE html>
{% load static %}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-
9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'css/base.css' %}">
<title>Newspaper Project</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">
Log In
Sign up
</form>
{% endif %}
</div>
</nav>
<div class="container">
{% block content %}
{% endblock %}
</div>
<!-- JAVASCRIPT 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/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
My Login HTML:
{% extends "base.html" %}
{% load crispy_forms_tags %}
{% block content %}
{% if user.is_authenticated %}
<h2>You are already logged in!</h2>
Log Out
{% else %}
<form class="shadow-lg p-3 mb-5 bg-white rounded login" method="post">
{% csrf_token %}
{{ form|crispy }}
<button class="btn btn-success" type="submit">Log In</button>
</form>
{% endif %}
{% endblock %}
And attached image how the page is looking.
I really dont know what else I can try to center the login block. All I want is to center it below navbar in remaining space.
Thanks in advance!
You can use text-align attribute for this as following.
<div style="text-align:center"><form id="form_login"><!--form content here--></form></div>
This will center all the content inside the parent DIV. An optional way is to use margin: auto CSS attribute with predefined widths and heights. Please follow the following thread for more information.
Try this, by setting the position to absolute you're positioning your form relative to the outer container, so you can tweak the percentage left and top as you wish.
.div {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
}
<body>
<div class="div">
<h3> Hi, I'm just an example form 😊</h3>
<input><br>
<input><br>
<button>click me</button>
</div>
</body>
I am learning Django by building an application, called TravelBuddies. It will allow travelers to plan their trip and keep associated travel items (such as bookings, tickets, copy of passport, insurance information, etc), as well as create alerts for daily activities. The application will also able to update local information such as weather or daily news to the traveler. Travelers can also share the travel information with someone or have someone to collaborate with them to plan for the trip.
I am facing a problem. There is extra space at the top and bottom of the navigation bar.
How can I remove this extra white space on top and bottom of the navigation bar? I tried modifying the style codes. But I haven't managed to fix the issue.
Here are my codes in triplist.html:
<!DOCTYPE html>
{% extends 'base.html' %}
{% load static %}
<html lang="en">
<link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
<head>
<meta charset="UTF-8">
{% block title%}Trip list{% endblock %}
<title>Trip list</title>
</head>
<body>
{% block content %}
<!--Page content-->
<h1>Upcoming Trips</h1><br>
<ol>
{% for trip in all_trips %}
<li>Trip name: {{ trip.trip_name }}</li>
<b>Date:</b> {{ trip.date }}<br>
<b>Planner:</b> {{ trip.planner_name }}<br>
<b>Coplanners:</b>
{% for user in trip.add_coplanner.all %}
{% if forloop.last %}
{{user.username}}
{% else %}
{{user.username}},
{% endif %}
{% endfor %}<br>
<b>Trip Description:</b> {{ trip.trip_description }}<br><br>
<!-- Co-planner: {{ trip.add_coplanner.all }}<br>-->
{% endfor %}
</ol>
<!-- <img src="{% static "images/botanical-garden.jpg" %}" alt="Botanical Garden" />-->
<!-- New line -->
{% endblock %}
</body>
</html>
Here are my codes in base.html:
<!--Result Size: 1392 x 239-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}
{% endblock %}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #f2f2f2;
padding: 25px;
}
</style>
</head>
<body>
<!--Logged in-->
<!--Left side-->
{% if user.is_authenticated %}
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'trips:triplist' %}">TravelBuddies</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Trip List</li>
<li>Add Trip</li>
<li>Add Activity</li>
<!--
<li>Contact</li>
-->
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
{{ request.user.username }}
</a>
</li>
<li><span class="glyphicon glyphicon-log-in"></span> Logout</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container text-left">
{% else %}
<!--Not Logged in-->
<!--Left side-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'trips:triplist' %}">TravelBuddies</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Trip List</li>
<!--
<li>Contact</li>
-->
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-plus-sign"></span> Register </li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
{% endif %}
<div class="jumbotron">
<div class="container text-left">
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
</body>
How can I fix this issue?
In your base html keep the main tags which is required for a template as shown below:
{% load static %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">
<title>Starter Template for Bootstrap</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/starter-template/">
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet">
</head>
<body>
{% block content %}
{% endblock %}
</body>
And in other templates you don't have to use html tags or body tags because you are inheriting those from base.html
{% extends 'base.html' %}
{% block content %}
Your html code goes here
{% endblock %}
Your triplist.html should be like this:
{% block content %}
<!--Page content-->
<h1>Upcoming Trips</h1><br>
<ol>
{% for trip in all_trips %}
<li>Trip name: {{ trip.trip_name }}</li>
<b>Date:</b> {{ trip.date }}<br>
<b>Planner:</b> {{ trip.planner_name }}<br>
<b>Coplanners:</b>
{% for user in trip.add_coplanner.all %}
{% if forloop.last %}
{{user.username}}
{% else %}
{{user.username}},
{% endif %}
{% endfor %}<br>
<b>Trip Description:</b> {{ trip.trip_description }}<br><br>
<!--Co-planner: {{ trip.add_coplanner.all }}<br>-->
{% endfor %}
</ol>
<!--<img src="{% static "images/botanical-garden.jpg" %}" alt="Botanical Garden" />-->
<!-- New line -->
{% endblock %}
My collapsible navbar is not working on this basic site, and I am not sure why. I have tried to reorder the CDN scripts, copied and pasted directly from Boostrap's docs, and have double checked the code a few times. I'm sure it's a stupid mistake, but can anyone help me and point out what is happening here? The toggle button appears, but doesn't do anything when clicked. This is being used with a Django project.
<!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.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>{% block title %}The title I'm using{% endblock title %}</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="{% url 'home' %}">Home</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 %}
<form class="form-inline ml-auto">
<a href="{% url 'logout' %}" class="btn btn-outline-secondary">
Log out</a>
<a href="{% url 'password_change' %}" class="btn btn-primary ml-2">
Change password</a>
Update user profile
{{ user.username }}
</form>
{% 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>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Incorrect attribute value in the toggle button:
data-target="navbarCollapse"
It should look like this (include the pound symbol):
data-target="#navbarCollapse"