I am working on a web page displaying a table below a navigation bar. The table on the page is generated from data coming from a database. The page as such does what it is supposed to do, but the table hosting the data is not left aligned on the page, but has a lot of white space to its left.
The Python/Flask-part of the code looks like this, data from the database comes as pandas DataFrame:
from flask import Flask, render_template
import DBConnector
from jinja2 import Environment
import pandas as pd
app = Flask(__name__)
app.jinja_options = {'lstrip_blocks': True, 'trim_blocks': True}
app.create_jinja_environment()
#app.route('/')
def index():
connector = DBConnector()
df: pd.DataFrame = connector.getData()
return render_template('index.html', tables=[df.to_html(classes='data', header=True)])
I borrowed the index.html code from a Stackoverflow post:
{% extends 'base.html' %}
{% block content %}
<h1>{% block title %}Table Viewer{% endblock %}</h1>
{% for table in tables %}
{{ table|safe }}
{% endfor %}
{% endblock %}
which extends the file base.html:
<!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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>{% block title %} {% endblock %}</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="{{ url_for('index')}}">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
<div class="container" align="left">
{% block content %}
{% endblock %}
</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+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
The output looks like this:
How can I remove the large white space to the left of the table?
Related
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'm running a Python application in Elastic Beanstalk for test, i connect the application to DynamoDB
and creating a table
The application uses Flask FrameWork , html/css and boto3 sdk to connect to dynamo
the problem is, I can't show the table details on the page
this is a application
this is the table from dynamo
the code of application is
import json
import boto3
from flask import Flask, render_template, request
application = Flask(__name__)
def conectar_dynamo():
dynamodb = boto3.resource('dynamodb', region_name='us-east-1')
table = dynamodb.Table('posts')
return table
def scan():
table = conectar_dynamo()
response = table.scan()
data = response['Items']
while 'LastEvaluatedKey' in response:
response = table.scan(ExclusiveStartKey=response['LastEvaluatedKey'])
data.extend(response['Items'])
return data
def put_item(data):
table = conectar_dynamo()
table.put_item(
Item={
'id': data['id'],
'content': data['content'],
'title': data['title']
}
)
return 'Concluido com sucesso!'
#application.route('/')
def index():
return render_template('index.html')
#application.route('/consultar', methods=['GET'])
def consultar():
return json.dumps(scan(), default=str)
#application.route('/incluir', methods=['POST'])
def incluir():
body = request.json
res = put_item(body)
return res
if __name__ == '__main__':
application.run(host='0.0.0.0', debug=False)
and the index.html is
{% extends 'base.html' %}
{% block content %}
<h1>{% block title %} teste{% endblock %}</h1>
{% for post in posts %}
<a href="#">
<h2>{{ post['title'] }}</h2>
</a>
<span class="badge badge-primary">{{ post['created'] }}</span>
<hr>
{% endfor %}
{% endblock %}
and my base.html is
<!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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>{% block title %} {% endblock %}</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="{{ url_for('index')}}">Barbosa's</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Sobre</a>
</li>
</ul>
</div>
</nav>
<div class="container">
{% block content %} {% endblock %}
</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+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
what am i doing wrong?
I want the css and js file to load.
It will display the error "Invalid block tag on line 15: 'static'. Did you forget to register or load this tag?" is displayed. but I have created the data correctly. does anyone see the error in my html file?
Here is the code where I suspect the problem
<!-- Bootstrap core CSS -->
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{% static 'css/modern-business.css' %}" rel="stylesheet">
Here is the complete code
{% load cms_tags menu_tags sekizai_tags %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}">
<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' %}">
<meta name="author" content="Life Imaging Services GmbH">
<title>{% page_attribute "page_title" %}</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{% static 'css/modern-business.css' %}" rel="stylesheet">
{% render_block "css" %}
</head>
<body>
{% cms_toolbar %}
<!-- Navigation -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">Start Bootstrap</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 %}
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Heading/Breadcrumbs -->
<h1 class="mt-4 mb-3">Full Width
<small>Subheading</small>
</h1>
<ol class="breadcrumb">
<li class="breadcrumb-item">
Home
</li>
<li class="breadcrumb-item active">Full Width</li>
</ol>
<p>Most of Start Bootstrap's unstyled templates can be directly integrated into the Modern Business template. You
can view all of our unstyled templates on our website at
https://startbootstrap.com/template-categories/unstyled.
</p>
</div>
<!-- /.container -->
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Your Website 2020</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core JavaScript -->
<script src="{% static 'vendor/jquery/jquery.min.js' %}></script>
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}></script>
{% render_block "js" %}
</body>
</html>
That is because you are not loading the static.
What to do?
Go to the top of the file
Add this {% load static %}
Now you can use the static because you have loaded it.
Read more about it here: https://docs.djangoproject.com/en/3.0/howto/static-files/
{% load static %}
You need to include this tag at the top of the page.
See more info here:
https://docs.djangoproject.com/en/3.0/howto/static-files/
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"
I have a base.html file and 10+ other pages with different background picture and contents. I tried using {% extends "base.html" %} , but how can I change my background picture and content in each pages if am doing so? Please help me on this case. Thanks in advance.
EDIT
My directory:
And my base.html:
{% load staticfiles %}
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Parasol.</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'css/navbar-static-top.css' %}" rel="stylesheet">
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="navbar-static-top.css" rel="stylesheet">
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<style>
{% block additional_styles %}
body {
background:url(static/custom/img/voice.jpg) no-repeat center center fixed;
}
</style>
{% endblock %}
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<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="sr-only">Toggle navigation</span>
<a class="navbar-brand" href="{% url "home" %}">Parasol.</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
Photos <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Timeline</li>
<li class="active">Quotes<span class="sr-only">(current)</span></li>
<li>Friends</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Just her and the revolution</h1>
<p>
Let's take a trip..
</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
There are many different ways to do that, which are dependent on the type of the content, your project and the templates structure. Regarding background picture, you can simply add block to your base.html:
{% block additional_styles %}
<style>
body {
background-image: url(images/base.jpg);
}
</style>
{% endblock %}
and then in your template_1.html (which is the template for some other pages):
{% extends 'base.html' %}
{% block additional_styles %}
<style>
body {
background-image: url(images/1.jpg);
}
</style>
{% endblock %}
In addition to above answer add below tags in base.html
{% block additional_styles %}
{% endblock %}
in your <head> tag.
Like (in base.html)
<head>
{% block additional_styles %}
{% endblock %}
</head>
You may do that by overriding bootstrap's predefined styles either as in css file or extra styles section or superseding a specific sections styles, e.g.
<nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-color: #32CD32;">
<nav class="navbar navbar-expand-md navbar-dark fixed-top" style="background-image: url({% static "img/ok.jpg" %}); background-repeat: repeat-x;">