Got myself a bootstrap navbar like this:
<nav class="navbar navbar-expand-lg bg-light">
<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="nav nav-tabs" >
<li class="nav-item active">
<a class="nav-link" href="{{ url_for('user', username=current_user.username) }}" data-toggle="tab">User</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{{ url_for('home') }}" data-toggle="tab">Home</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
{% if current_user.is_anonymous %}
<li class="nav-item active">
<a class="nav-link" href="/login">Login</a>
</li>
{% else %}
<li class="nav-item active">
<a class="nav-link" href="/logout">Logout</a>
</li>
{% endif %}
</ul>
</div>
</nav>
but for some reason when i'm using the "data-toggle=tab" option the tabs start working but they don't redirect me to given urls, when i remove the "data-toggle=tab" urls work fine again
if you need to redirect to a link. No need to use data-toggle="tab". the href in an <a/> tag with data-toggle="tab" attribute means you're using bootstrap tabs which has a js counter part.
Related
<nav class="navbar navbar-dark align-items-start sidebar sidebar-dark accordion bg-gradient-primary p-0">
<div class="container-fluid d-flex flex-column p-0"><a
class="navbar-brand d-flex justify-content-center align-items-center sidebar-brand m-0" href="#">
<div class="sidebar-brand-icon rotate-n-15"><i class="fas fa-laugh-wink"></i></div>
<div class="sidebar-brand-text mx-3"><span>hEALTHGENIC</span></div>
</a>
<hr class="sidebar-divider my-0">
<ul class="navbar-nav text-light" id="accordionSidebar">
<li class="nav-item"><a class="nav-link active" href="/"><i
class="fas fa-tachometer-alt"></i><span>Dashboard</span></a></li>
<li class="nav-item"></li>
<li class="nav-item"></li>
<li class="nav-item"><a class="nav-link" href="/login"><i
class="far fa-user-circle"></i><span>Login</span></a></li>
<li class="nav-item"></li>
</ul>
<div class="text-center d-none d-md-inline"><button class="btn rounded-circle border-0"
id="sidebarToggle" type="button"></button></div>
</div>
</nav>
The above code waas stored in index.html.
The flask code(python) was:
from flask import Flask, render_template, request
local_server = True
app = Flask(__name__)
#app.route('/')
def index():
return render_template('index.html')
#app.route('/login')
def login():
return render_template('login.html')
if __name__ == '__main__':
app.run(debug = True)
On clicking the dashboard button, the link which is returned is
/index.html instead of / . Whats the problem here?
When you creating a href's to route in Flask you should use url_for function in HTML file:
<nav class="navbar navbar-dark align-items-start sidebar sidebar-dark accordion bg-gradient-primary p-0">
<div class="container-fluid d-flex flex-column p-0"><a
class="navbar-brand d-flex justify-content-center align-items-center sidebar-brand m-0" href="#">
<div class="sidebar-brand-icon rotate-n-15"><i class="fas fa-laugh-wink"></i></div>
<div class="sidebar-brand-text mx-3"><span>hEALTHGENIC</span></div>
</a>
<hr class="sidebar-divider my-0">
<ul class="navbar-nav text-light" id="accordionSidebar">
<li class="nav-item"><a class="nav-link active" href="{{ url_for('index') }}"><i
class="fas fa-tachometer-alt"></i><span>Dashboard</span></a></li>
<li class="nav-item"></li>
<li class="nav-item"></li>
<li class="nav-item"><a class="nav-link" href="{{ url_for('login') }}"><i
class="far fa-user-circle"></i><span>Login</span></a></li>
<li class="nav-item"></li>
</ul>
<div class="text-center d-none d-md-inline"><button class="btn rounded-circle border-0"
id="sidebarToggle" type="button"></button></div>
</div>
</nav>
I'm trying to display certain content in my navbar when a user is logged in, but {% if user.is_authenticated %} does not work when I add it to my HTML
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
{% if request.user.is_authenticated %}
<li class="nav-item active">
<a class="nav-item nav-link" id="home" href="/home">Home</a>
</li>
<li class="nav-item active">
<a class="nav-item nav-link" id="logOut" href="/logout">Log-out</a>
</li>
{% else %}
<li class="nav-item active">
<a class="nav-item nav-link" id="login" href="/login">Login</a>
</li>
<li class="nav-item active">
<a class="nav-item nav-link" id="signUp" href="/sign-up">Sign-up</a>
</li>
{% endif %}
</ul>
Flask-Login adds the current_user variable to your templates
{% if current_user.is_authenticated %}
...
{% else %}
...
{% endif %}
I have just trying to create a simple code and in terms of designing it I used bootstrap CDN link and navigation bar is not showing its result. Could you help me with that?
Code is below:
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse">
</nav>
{% block body %}
{% endblock %}
</body>
</html>
Here it should show me a bar but it is not working.
Yes, it will only show you a bar because you didn't include anything in your <nav>. Try this iteration of the navbar instead:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!-- here are the contents! your navbar didn't show you anything -->
<!-- because you didn't feed any contents into your navbar -->
<a class="navbar-brand" href="#">Navbar</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">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Please comment if this still doesn't work. Also, you might want to include the javascript files:
<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>
Yes, you need the css file, but you also need the javascript files for everything to function properly.
Since I cant find your navbar in your above mentioned code, I assume that you have your navbar in another file. If that is the case you have to include it like {% include 'navbar.html' %} assuming you saved the file as navbar.html. Or if your navbar comprises of just two lines which you mentioned here, it ill surely be visible if you change your navbar's color. Moreover I think you also have to include the JS and Jquery CDN links to make your navbar responsive! Hope this helps :)
I`ve got two tabs:
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="open-tab" data-toggle="tab" href="#open" role="tab" aria-controls="open" aria-selected="true">Active Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" id="close-tab" data-toggle="tab" href="#close" role="tab" aria-controls="close" aria-selected="false">Inactive Projects</a>
</li>
</ul>
The Model of the Application got a field {{app.is_active}}.
Is Filtering the tab with a script is the best option to only show "Active projects" in the active tab and "Inactive projects" in the inactive tab?
Many Thanks,
if you're not using django rest frame work.
it has a simple solution:
<ul class="nav nav-tabs" id="myTab" role="tablist">
{% for item in app_list %}
{% if item.is_active %}
<li class="nav-item active">
<a class="nav-link active" id="open-tab" data-toggle="tab" href="#open" role="tab" aria-controls="open" aria-selected="true">{{ item }}</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" id="close-tab" data-toggle="tab" href="#close" role="tab" aria-controls="close" aria-selected="false">{{ item }}</a>
</li>
{% endif %}
{% endfor %}
</ul>
Hi i have a navbar that will not be collapsed once it has been expanded.
If anyone could take a look at my code and give me some advice that would be of great help to me.
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<button class="btn btn-primary" id="menu-toggle">Show Rooms</button>
<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 ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
{% if session['username'] %}
<a id='change_username_btn' class="nav-link" href="#">{{ session['username'] }} <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href= "{{ url_for('logout') }}">Log Out</a>
</li>
{% else %}
<li class="nav-item active">
<a data-toggle="modal" data-target="#exampleModalCenter" id='change_username_btn' class="nav-link" href="#">Click Here to Enter Username<span class="sr-only">(current)</span></a>
</li>
{% endif %}
</ul>
</div>
</nav>
EDIT
Like what people have helped to mention before. The issue i was experiencing was because i am trying to use a responsive navbar which was causing the issue.
Your code has a simple problem.
you are trying to collapse a responsive navbar so it won't collapse well.
you had to remove navbar-collapse class to prevent going responsive.
try this (i didn't change your design) :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<button class="btn btn-primary" id="menu-toggle">Show Rooms</button>
<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#navbarSupportedContent" aria-expanded="false" aria-controls="navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a id='change_username_btn' class="nav-link" href="#">Name <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href= "{{ url_for('logout') }}">Log Out</a>
</li>
</ul>
</div>
</nav>
</body>
</html>