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;
Related
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
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.
I have a base form which contains fields to be filled in by the user and a button which allows the user to add up to ten instances of a different form that is relevant to the base form (this is just dynamically adding forms through django formset). When the html is loaded the base form and all content looks great, but when I go to add a form from the formset, the CSS gets messed up because the form from the formset will neither conform to the base form CSS or any CSS I've added to it.
I've made a div to contain all forms added via the formset add button so that I can format all added forms with one CSS id. However, it seems no formatting works - the added forms' elements expand the base form's margins and seem to be floated.
HTML:
<div class="center-text jumbotron">
<h2>Incident Report Form</h2>
<form method="post" class="form-horizontal">
{% crispy incident_form %}
<div id="form_set_class">
{{ incident_formset.management_form }}
<table>
{% for form in incident_formset %}
{{form.non_filed_errors}}
{{form.errors}}
{% crispy form %}
{% endfor %}
</table>
</div>
<input type="button" id="add_def_report" value="Add Report">
<div id="empty_form" style="display:none">
{{incident_formset.empty_form}}
</div>
<input type="submit" class="btn btn-primary" value="Submit">
</form>
</div>
CSS:
.center-text{
display: block;
text-align: center;
}
form{
display: inline-block;
margin-right: auto;
margin-left: auto;
text-align: left;
}
legend {
float: left; /*allows for top margin */
border-bottom: 1px solid black;
margin-bottom: 20px;
margin-top: 20px;
}
#form_set_class{
clear: both;
display: block;
text-align: center;
}
Good Styling (image shows top part of form):
Messed Up Styling (image shows bottom part of form; the added formset starts at the "Supplier" dropdown):
I presume you have a parent and child model scenario. If that is so, then you may layout your child forms like this (laid out in tabular fashion):
<!-- ABOVE THIS WOULD BE YOUR PARENT FORMS -->
<!-- HERE WE CAN HAVE TABLE HEADER FOR THE FORMS ADDED DYNAMICALLY -->
<table class="table table-bordered table-striped table-sm">
{{ incident_formset.management_form }}
{% for form in incident_formset.forms %}
{% if forloop.first %}
<thead id="hdrID">
<tr>
{% for field in form.visible_fields %}
<th>{{ field.label|capfirst }}</th>
{% endfor %}
</tr>
</thead>
{% endif %}
<!-- HERE WILL BE THE FORMS ADDED BY THE USER -->
{% for field in form.visible_fields %}
<td>
{# Include the hidden fields in the form #}
{% if forloop.first %}
{% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}
{% endif %}
{{ field.errors.as_ul }}
{{ field }}
</td>
{% endfor %}
{% endfor %}
</table>
<!-- BELOW THIS WOULD BE THE FORM SUBMISSION AND THE REST -->
You may then think of applying css as per your requirements using tags (eg. hdrID shown in the code).
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
I am using Zurb Ink to make html emails. With the panel, it looks correct in the browser with it being 601px wide. But on outlook on Safari OS(Mac book)the panel goes all the way to across the email(like a footer or header).
Should it be like this on outlook in Safari? Or is there something wrong with my code?
<table class="row">
<tr>
<td class="panel" style="background: #ECF8FF; border-color: #b9e5ff">
<table class="twelve columns container">
{% for item in object_list %}
<tr>
<td class="four sub-columns">
{% if not item.user_assigned %}
<table class="tiny-button small radius alert">
<tr>
<td>unssigned</td>
{% else %}
<table class="tiny-button small radius success">
<tr>
<td>assigned</td>
{% endif %}
</tr>
</table>
</td>
<td class="eight sub-columns last">
{{ item.date_due }} - {{ item.action }}
</td>
<td class="expander"></td>
</tr>
{% endfor %}
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Looks like it is because you are missing wrapper and container.
In the docs it mentions the following:
container - Constrains the content to a 580px wrapper on large screens (95% on small screens) and centers it within the body.
wrapper - Wraps each .columns table, in order to create a gutter between columns and force them to expand to full width on small screens.