How do I prevent the content of a long table or list from displaying over my footer if it takes up more than 100% of the height of the screen? I'd like the table to be responsive and take up the entire div. I've tried this answer but manually setting the bottom-margin did not help. My current ad-hoc solution is to manually limit the table height to prevent if from spilling over the footer. Below is the index.html that extends from base.html
/* style.css */
html {
font-family: Arial, Helvetica, sans-serif;
}
header {
padding-bottom: 16px;
}
body {
padding-bottom: 120px;
}
div#sp500Table.table-responsive {
overflow-y: scroll;
height: 500px;
}
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!--base.html -->
<body class="bg-dark text-white container-fluid">
<header class="navbar navbar-expand-sm navbar-dark sticky-top bg-dark">
...
</header>
<main role="main">
<div class="container-fluid d-flex">
{% block body %} {% endblock %}
</div>
</main>
<footer class="page-footer font-small fixed-bottom">
<div class="container">
...
</div>
</footer>
</body>
<!-- index.html -->
{% extends 'base.html' %} {% block body %}
<div class="table-responsive" id="sp500Table">
<table class="table table-light table-striped table-sm" id="sp500Table">
<thead class="thead-light">
<tr> {% for col in table_header %}
<th>{{ col }}</th>
{% endfor %}
</tr>
</thead>
<tbody> {% for num, r in enumerate(payload) %}
<tr>
<td>{{ num+1 }}</td>
<td>{{ r.get('symbol') }}</td>
<td>{{ r.get('security') }}</td>
<td>link</td>
<td>{{ r.get('sector') }}</td>
<td>{{ r.get('sub_sector') }}</td>
<td>{{ r.get('headquarters') }}</td>
<td>{{ r.get('date_first_added') }}</td>
</tr> {% endfor %}
</tbody>
</table>
</div>
{% endblock %}
Put the table into a div and add a height to the div. The add overflow: auto to the div. This will prevent table from taking up more space than you want and still allow you to scroll through all the page content.
Related
I am working on a simple web-application with flask and am currently trying to dynamically create a scrollspy list group with jinja. In the code snippet the variable "choices" represents a list of lists of dictionaries. So the variable dict will be a list of dictionaries that populates the ids needed for the list group to work. For simplicity, I am testing it with choices containing only one list of dictionaries and loop.index to create the ids, but I was going to change that to uniquly generated ids later as choices will have more elements.
Unfortunately, the list group does not work properly. Any ideas as to what I'm doing wrong? The browser console throws me an error, "uncaught TypeError: i is null", relating to the bootstrap scrollspy.js. I was not able to trace it back and figure out what causes the error.
{% extends "layout.html" %}
{% block title %}
Results
{% endblock %}
{% block main %}
<!--course display-->
{% for i in choices %}
<div class= "container-fluid">
<div class="row justify-content-center">
<div class="col-9 heading">
<div>
<h1>Coursera Courses</h1>
</div>
</div>
</div>
<div class="row justify-content-center result-background">
<div id="list-example" class="col-2 list-group">
{% for dict in i%}
<a class="list-group-item list-group-item-dark list-group-item-action" href="#list-item-{{ loop.index }}">{{ dict["Course Name"] }}</a>
{% endfor %}
</div>
<div class="col-7">
<div class="scrollspy-example" data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="40" tabindex="0">
{% for dict in i %}
<div class="boxlayout" id="#list-item-{{ loop.index }}">
<img src="{{ dict["Image URL"] }}" alt="responsive webite" class="img-thumbnail" align="left" width="15%" height="15%">
<h2>{{ dict["Course Name"] }}</h2>
<details close>
<summary>Lorem ipsum</summary>
Lorem ipsum
</details>
</br>
<table>
<tr>
<td>Manufacturer</td><td> </td>
<tr>
<td>Certificate</td><td>{{ dict["Certificate"] }}</td>
</tr>
<tr>
<td>Costs</td><td>${{ dict["Current Price"] }}</td>
</tr>
<tr>
<td>Landing Page</td>
</tr>
</table>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% endfor %}
{% endblock %}
The CSS I use as per the Bootstrap requirements:
.scrollspy-example{
position: relative;
overflow-y: scroll;
height: 300px;
}
I would like to change the content of the row divs inside the indices_container when the screen becomes small. Currently, on all screen sizes, each row shows the index name, price, 1-day change, and ytd change. I would only like to show the index name and ytd change on small screens.
I am only using Flask and bootstrap to serve my application so I am not even sure if this is even possible without something like react and vue. Can this be done with #media or browser JS?
index.html file:
{% extends 'base.html' %}
{% block body %}
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
{{message}}
</div>
{% endfor %}
{% endif %}
{% endwith %}
<div class="indices-container">
<div class="row">
{% for index in total_payload.get('indexes').get('meta_data') %}
<div class="col-sm-2 text-center">
{% set d = total_payload.get('indexes').get(index) %}
{{ "{} ${:.2f}".format(index, d['current_price']) }}
{{ "{:0.2f}% 1-Day".format(d['percent_change']) }}
{{ "{:0.2f}% YTD".format(d['ytd_percent_change']) }}
</div>
{% endfor %}
</div>
</div>
<div class="sp500-table-container">
<div class="table-responsive" id="sp500Table">
<table class="table table-light table-striped table-sm" id="sp500Table">
<thead class="thead-light">
<tr> {% for col in total_payload.get('companies').get('meta_data') %}
<th>{{ col }}</th>
{% endfor %}
</tr>
</thead>
<tbody> {% for num, r in enumerate(total_payload.get('companies').get('sp500companies')) %}
<tr>
<td>{{ num+1 }}</td>
<td>{{ r.get('Symbol') }}</td>
<td>{{ r.get('Security') }}</td>
<td>link</td>
<td>{{ r.get('Sector') }}</td>
<td>{{ r.get('SubSector') }}</td>
<td>{{ r.get('Headquarters') }}</td>
<td>{{ r.get('DateFirstAdded') }}</td>
</tr> {% endfor %}
</tbody>
</table>
</div>
</div>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p.name-price").css("color", "red");
});
});
</script>
{% endblock %}
style.css file:
html {
font-family: Arial, Helvetica, sans-serif;
}
body {
/* padding-bottom: 80px; */
/* height: 100% */
}
main {
/* display: flex; */
/* flex-direction: column; */
/* flex-grow: 1; */
padding-bottom: 80px;
overflow: hidden;
}
footer {
padding-top: 80px;
}
.indices-container {
margin: auto;
}
.sp500-table-container {
height: 70vh;
width: 100vw;
overflow: auto;
position: relative;
padding-bottom: 16px;
margin: auto;
/* flex: 1; */
/* margin-bottom: 16px; */
}
This is done with css native Media Queries, no additional libraries needed.
It would look something like this:
#media (max-width: 400px){
.indicie-payment { display: none; }
...
}
BUT
Since you said you are already using Bootstrap, you can use some utility classes for display that are already provided by Bootstrap
In your case you would need to wrap some of your items in an element like div or span and use a utility class like d-sm-none
So it might look something like this:
<div class="indices-container">
<div class="row">
{% for index in total_payload.get('indexes').get('meta_data') %}
<div class="col-sm-2 text-center">
{% set d = total_payload.get('indexes').get(index) %}
<span class="d-sm-none">{{ "{} ${:.2f}".format(index, d['current_price']) }}</span>
<span class="d-sm-none">{{ "{:0.2f}% 1-Day".format(d['percent_change']) }}</span>
{{ "{:0.2f}% YTD".format(d['ytd_percent_change']) }}
</div>
{% endfor %}
</div>
</div>
I tried some of the answers posted on this forum but cannot find one fitting for me,
I realise this is an age old question sorry.
Im trying to get a vertical line like in this design:
The problem i'm facing is that this is in a table and I cannot figure out how to get them to cros like this.
Its about the element td with 'scores' id
Twig file
{% extends 'base.html.twig' %}
{% block body %}
<div class="table-responsive">
{% for group in duel_groups %}
{% if group is not empty %}
<table class="table table-bordered table-light" style="margin-top: 30px;">
<thead>
<tr>
<th>Omloop</th>
<th>Partuur 1</th>
<th>Scores</th>
<th>Partuur 2</th>
{# <th>Spelers</th>#}
</tr>
</thead>
<tbody class="text-center">
{% for duel in group %}
<tr>
<td>{{ duel.omloopNummer }}</td>
<td id="team1">{{ duel.team1 }}</td>
<td id="scores">
{{ duel.eerstenP1 }} {{ duel.eerstenP2 }}<br>
<hr>
{{ duel.puntenP1 }} {{ duel.puntenP2 }}
</td>
<td id="team2">{{ duel.team2 }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
{% endfor %}
</div>
{% endblock %}
I have tried creating a div of 1px but that didn't work.
I tried a couple of solutions from this question How to make a vertical line in HTML
None seem to fit my use case tho.
Poking around some more came up with this:
<td id="scores" style="background: linear-gradient(#bcbcbd, #bcbcbd) no-repeat center/3px 85%;">
{{ duel.eerstenP1 }} {{ duel.eerstenP2 }}<br>
<hr style="border-top: 3px solid #000000; background: transparent;">
{{ duel.puntenP1 }} {{ duel.puntenP2 }}
</td>
Where I am adding a vertical line to the middle of the column and styling the hr tag
I want to split web page onto two parts. Static (top one) and scroll-able (bottom one).
The problem is that solution I have creates a scroll-able box with fixed width and height. But I've seen an example of a page where bottom and right sections are limited by size of the browser screen and have scroll bars always visible. With fixed size box this will not work if screen is small. The scroll bars will be hidden.
So far I tried only HTML and CSS approach. I use Flask and Python 3 as an engine.
Here is what I already created. First is base.html and second is data_entry.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="static/css/style.css">
Home
<a> </a>
Data entry
<a> </a>
Help
</head>
<body class="stop-scrolling">
{% block content %}{% endblock %}
</body>
</html>
{% extends 'base.html' %}
{% block content %}
<h2><br>{{title}}</h2>
<br>
<h3>Searchable fields</h3>
<div style="float:top; width:2000px">
<form action="/data_entry" method="POST">
<table>
<tbody>
<tr>
...
</tr>
</tbody>
</table>
<input type="submit" class="button" value="Search">
</form>
</div>
<div style="float:bottom; width:2000px; height:400px; overflow:auto;">
<table class="tableborder">
<thead>
<tr class="tableheaderborder">
{% for h in selected_header %}
<td class="tableheaderborder"> {{ h }} </td>
{% endfor %}
</tr>
</thead>
<tbody class="tableborder">
{% for row in selected_entries %}
<tr class="tableborder">
{% for column in row %}
<td class="tableborder"> {{ column }} </td>
{% endfor %}
</tr>
{% endfor%}
</tbody>
</table>
</div>
{% endblock %}
You can use this on your lower div. It will always show scroll bar to your div
overflow-y:scroll !important;
For a website I'm using Bootstrap Material Design and having a hard time aligning elements in a row (course.name and the course.update, course.delete buttons).
I want them to align vertically with CSS but vertical-align:middle doesn't work. Neither does <tr valign="middle">.
Any help is appreciated.
{% if course_list %}
<table class="table table-hover">
<tr>
<th>Course Name</th>
</tr>
{% for course in course_list %}
<tr>
<td><a class="text-nowrap" href="{% url "courses.detail" course.id %}">{{ course.name }}</a>
{% if course.instructor == user %}
<div class="pull-right">
{% url 'courses.update' pk=course.id as url %}
{% bootstrap_button button_type='link' content='Edit' button_class='btn-warning' href=url %}
{% url 'courses.delete' pk=course.id as url %}
{% bootstrap_button button_type='link' content='Delete' button_class='btn-danger' href=url %}
</div>
{% endif %}
</td>
</tr>
{% endfor %}
</table>
first of all your table is not responsive, to make it responsive do structure like this
<div class="table-responsive">
<table class="table table-bordered table-striped">
//rest of your code
</table>
</div>
it will make your table responsive and
.table td {
text-align: center;
}
or
<td class="text-center">some text</td>
make it center aligned