I have a page that calls a custom tag that, in turn, calls html that forms a table:
<table>
<tbody>
<tr>
{% for x in variable %}
<td>
<table class="[class]">
<tbody>
{% for y in another variable %}
<tr>
<td>
<form>
[a form]
{% csrf_token %}
</form>
</td>
<td>
<form>
[another form]
{% csrf_token %}
</form>
</td>
{% endfor %}
</tbody>
</table>
</td>
{% endfor %}
</tr>
</tbody>
</table>
Is there an easy way to get this to auto-wrap when it reaches the end of a specified width or the edge of a screen?
(Note that this HTML is being generated from Django, but this isn't Django-specific).
Related
I'm currently trying to display a bunch of Information of a model inside the template.
Therefore I've been creating a table to show all of the information horizontally for every "previous game" in the database:
<table style="height: 100%">
{% for previous_game in previous_games %}
<tr>
<th> {{ previous_game.name }}</th>
</tr>
<tr>
<td> <img id="Videogame_Picture" src="{{ previous_game.image.url }}"> </td>
</tr>
<tr>
<td> {{ previous_game.date }} </td>
</tr>
<tr>
<td> {% load static %} <img id= "Result_Icon" src="{% static previous_game.min_req %} "></td>
</tr>
<tr>
<td> {% load static %} <img id= "Result_Icon" src="{% static previous_game.rec_req %} " ></td>
</tr>
<tr>
<td> PC Rig {{ previous_game.config }}</td>
</tr>
{% endfor %}
</table>
It shall look like this:
But currently all the Table columns are displaying vertically underneath instead of horizontally next to each previous game and I can't figure out why.
Can you help me out here?
Thanks in Advance!
I would have all my headers in the first row and then start looping through my games with a row per game and cells (td) for each game attribute:
<table style="height: 100%">
<tr>
<th> previous game name </th>
<th> image </th>
<th> previous game date </th>
<th> previous game result 1 </th>
<th> previous game result 2 </th>
<th> PC Rig </th>
</tr>
{% for previous_game in previous_games %}
<tr>
<td> {{ previous_game.name }} </td>
<td> <img id="Videogame_Picture" src="{{ previous_game.image.url }}"> </td>
<td> {{ previous_game.date }} </td>
<td> {% load static %} <img id= "Result_Icon" src="{% static previous_game.min_req %} "> </td>
<td> {% load static %} <img id= "Result_Icon" src="{% static previous_game.rec_req %} " ></td>
<td>{{ previous_game.config }}</td>
</tr>
{% endfor %}
</table>
Alright I got a solution:
Since I created a Row for every Information of the "previous game" - Object, in every loop, I needed to put the loop inside the Row, for being able to only create the Row once.
Now it looks like this:
<table style="height: 150px; border: 1px solid black; width: 600px">
<tr>
{% for previous_game in previous_games %}
<th> {{ previous_game.name }}</th>
{% endfor %}
</tr>
<tr>
{% for previous_game in previous_games %}
<td> <img id="Videogame_Picture" src="{{ previous_game.image.url }}"> </td>
{% endfor %}
</tr>
<tr>
{% for previous_game in previous_games %}
<td> {{ previous_game.date }} </td>
{% endfor %}
</tr>
<tr>
{% for previous_game in previous_games %}
<td style="display: inline"> {% load static %} <img id= "Result_Icon" src="{% static previous_game.min_req %} "></td>
<td style="display: inline"> {% load static %} <img id= "Result_Icon" src="{% static previous_game.rec_req %} " ></td>
{% endfor %}
</tr>
<tr>
{% for previous_game in previous_games %}
<td> PC Rig {{ previous_game.config }}</td>
{% endfor %}
</tr>
</table>
It doesn't feel like the cleanest solution tbh, but it worked for me!
As the title says, i'm trying to display 2 tables side by side. I tried a couple of methods but no one shows results.
Right now this is the code of the 2 tables:
<div>
<table style="float: left" class="table table-striped table-bordered table-sm">
{% for item in product %}
{% if item.orden_ref_id == orden.id %}
<tr>
<td>
{{ item.articulo }}
</td>
</tr>
{% endif %}
{% endfor %}
</table>
<table style="float: right" class="table table-striped table-bordered table-sm">
{% for item in valor %}
{% if item.refer_id == orden.id %}
{% if item.show_ref == '2' %}
<tr>
<td>
{{ item.costo }}
</td>
</tr>
{% endif %}
{% endif %}
{% endfor %}
</table>
</div>
but it look like this:
Tables look
How can i solve this issue?
You just need to change the div's around the table. If are using bootstrap you make a surrounding row and then make each table a column. If not using bootstrap then see this page for adding the necessary CSS, https://www.w3schools.com/howto/howto_css_two_columns.asp
<div class = "row">
<div class = "col">
<table class="table table-striped table-bordered table-sm">
{% for item in product %}
{% if item.orden_ref_id == orden.id %}
<tr>
<td>
{{ item.articulo }}
</td>
</tr>
{% endif %}
{% endfor %}
</table>
</div>
<div class = "col">
<table class="table table-striped table-bordered table-sm">
{% for item in valor %}
{% if item.refer_id == orden.id %}
{% if item.show_ref == '2' %}
<tr>
<td>
{{ item.costo }}
</td>
</tr>
{% endif %}
{% endif %}
{% endfor %}
</table>
<div class = "col">
</div>
I have tried to make a page where one column is fixed and the other one is scrollable. In the template "Os name" and "{{ i.os_name }}", I want to make it fixed. All the other ones should be scrollable.
I have tried some solutions but I'm facing issues. I have pasted the CSS which I have tried. Please tell me where I am going wrong so I can make it correct.
<div>
<table class="table accountTable" id="book-table" cellpadding="0" cellspacing="0" style="width: 91%;">
<thead>
<tr class="accountBorder">
<th class="osfix">Os Name</th>
<th class="">Browser</th>
<th>IP Address</th>
<th>Location</th>
<th>Session Time</th>
<th>Activity</th>
</tr>
</thead>
<tbody>
{% for i in account %}
<tr>
<td><div class="osfixName">{{ i.os_name }}</div></td>
<td>
<div class = "title_elipses accordion">{{ i.browser }}</div>
<div class="panel" style="display: none;"><p>{{i.browser}}</p></div>
</td>
<td>
<div>{{ i.ip_address }}</div>
</td>
<td>
<div>{{ i.city }}, {{ i.country }}</div>
</td>
<td>
{% for key,value in some_date.items %}
{% if i.id == key %}
<!-- here we are displaying the age of the ad -->
<span class="dealpagetext">{{ value }}</span><br>
{% endif %}
{% endfor %}
<!-- <div>{{ i.last_loggedin }}</div>-->
</td>
<td>
{% if i.activity == 1 %}
<div>Signout</div>
{% else %}
<div></div>
{% endif %}
</td>
</tr>
{% empty %}
<tr>
<td colspan="7" class="text-center">No History</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
css
#book-table {
width: 131% !important;
margin-left: 111px;
}
.osfix {
position: fixed;
left: 0;
background-color: #ddd;
padding-left: 4px;
}
.osfixName {
position: fixed;
left: 0;
padding-left: 4px;
z-index: 88;
background-color: #fff;
}
i have a html page in my django templates, its a pdf type, the for loop should make a transactions based on the number of which the object model returns, however i want every transaction to be in a full html page, and the other transaction come net page, i have tried to do it but seems a bit hard since im new to django html.
{% extends "base.html" %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
{% block title %} Report {% endblock title %}
<div id="container">
{% block content %}
{% for transaction in transactions %}
{% if transaction.complete %}
<table class="tg">
<thead>
<tr>
<th class="tg-fv77" colspan="12" rowspan="2"><span style="color:#3531FF">Report For Tenant ( {{ transaction.chp_reference }} )</span></th>
</tr>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0pky" colspan="9">CHP Reference</td>
<td class="tg-0pky" colspan="3">{{transaction.chp_reference}}</td>
</tr>
<tr>
<td class="tg-0pky" colspan="9">Rent Effective From (dd/mm/yyyy)</td>
<td class="tg-0pky" colspan="3">{{transaction.rent_effective_date}}</td>
</tr>
<tr>
<td class="tg-0lax" colspan="9">CRA Fortnightly Rates valid for 6 months from</td>
<td class="tg-0lax" colspan="3">{{transaction.cra_rate_from}}</td><hr>
</tr>
<tr>
<td class="tg-0lax" colspan="9">Market Rent of the Property</td>
<td class="tg-0lax" colspan="3">{{transaction.property_market_rent}}</td>
</tr>
<tr>
<td class="tg-0lax" colspan="9">Number of Family Group(s)</td>
<td class="tg-0lax" colspan="3">{{transaction.number_of_family_group}}</td>
</tr>
</tbody>
</table>
{% if transaction.complete %}
<table class="tg" style="undefined;table-layout: fixed; width: 714px">
<colgroup>
<col style="width: 86px">
<col style="width: 201px">
<col style="width: 109px">
<col style="width: 63px">
<col style="width: 121px">
<col style="width: 134px">
</colgroup>
<thead>
<tr>
{% for f in transaction.family_groups.all %}
<th style="text-align:left">Family No</th>
<th style="text-align:left">Income Type</th>
<th style="text-align:left">Name</th>
<th style="text-align:left">Rent %</th>
<th style="text-align:left">Weekly Income</th>
<th style="text-align:left"><span style="background-color:#ffe0c7">Rent Component</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-4erg">{{f.name}}</td>
<td >{% for m in f.family_members.all %}{{ m.num_of_family_members }}<br>{% endfor %}</td>
<td >{% for m in f.family_members.all %} {{m.name}} <br> {% endfor %}</td>
<td class="tg-4erg">{% for m in f.family_members.all %} {{m.effective_rent_percentage}} <br> {% endfor %}
</td>
<td class="tg-4erg">{% for m in f.family_members.all %} {{m.income}} <br> {% endfor %}</td>
<td class="tg-1qbe">{% for m in f.family_members.all %} {{m.income_component|stringformat:".2f"}} <br> {% endfor %}</td>
</tr>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0pky" colspan="9">CHP Reference</td>
<td class="tg-0pky" colspan="3">{{transaction.chp_reference}} Insufficient Info.</td>
<hr>
</tr>
</tbody>
</table>
{% endif %}
</table>
{% endfor %}
{% endblock content %}
</div>
</html>
You can convert a html file to a pdf using xhtml2pdf.There are many other alternatives to it as well.
from django.template.loader import get_template,render_to_string
import xhtml2pdf.pisa as pisa
from io import BytesIO
def render_to_file(path: str, params: dict):
template = get_template(path)
html = template.render(params)
file_name = "report.pdf"
file_path = os.path.join(os.path.abspath(os.path.dirname("__file__")), "charts", file_name)
with open(file_path, 'wb') as pdf:
pisa.pisaDocument(BytesIO(html.encode("UTF-8")), pdf, link_callback=BASE_DIR + '/static/charts/Logo/')
return [file_name, file_path]
where 'path' is the path to your html template and params is the contect dictionary (transaction data in your case).
Do read the documentation of xhtml2pdf as it doesn't support all the css that you would apply to a normal html page.
I'm having an issue with the template view below. I've added a scrollbar to the "Used in" table at the bottom, however I am getting a lot of whitespace underneath it. When I try removing each div/element one by one the issue seems to come from that table alone.
view.html
{% extends "includes/base.html" %}
{% load crispy_forms_tags %}
{% block body %}
<div class="container-fluid">
<div class="row">
<div class="col">
<form method="POST">
<br>
{% csrf_token %}
{% crispy partform %}
</form>
<br>
<table class="table table-hover">
<tbody>
{% for comment in partcomments %}
<tr>
<td>{{ comment }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<form method="POST">
<br>
{% csrf_token %}
{% crispy commentForm %}
</form>
<div>
{% for image in images %}
<img class="center img-responsive" src="{{ image.image.url }}"
style="height: 25%"/>
{% endfor %}
<br>
<form enctype="multipart/form-data" method="post">
{% csrf_token %}
{{ imageform.as_p }}
<button type="submit">Upload</button>
</form>
</div>
</div>
<div class="col">
<div class="table-wrapper-scroll-y my-custom-scrollbar">
<table class="table table-hover mb-0">
<thead>
<tr>
<th>Supplier</th>
</tr>
</thead>
<tbody>
{% for supplier in partsuppliers %}
<tr data-href="{% url 'info_supplier' supplier.supplier.id %}">
<td>{{ supplier }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<a class="btn btn-secondary btn-sm btn-pad" href="{% url 'addpartsupplier' part_id=part_id %}"
role="button">Add
Supplier</a>
<div class="table-wrapper-scroll-y my-custom-scrollbar">
<table class="table table-hover mb-0">
<thead>
<tr>
<th>Movements</th>
</tr>
</thead>
<tbody>
{% for movement in movements %}
<tr>
<td>{{ movement.history_date }}</td>
<td>{{ movement.history_user }}</td>
<td>{{ movement.change }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="table-wrapper-scroll-y my-custom-scrollbar">
<table class="table table-hover mb-0">
<thead>
<tr>
<th>Used in</th>
</tr>
</thead>
<tbody>
{% for activity in activities %}
<tr>
<td>{{ activity.group.groupName }}</td>
<td>{{ activity.activity.activityName }}</td>
<td>{{ activity.qty.quantity__sum }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
{% endblock %}
I have a custom.css file served in the static folder that is loaded in the base.html as per below. The issue arises only in this view as I've tried removing the base.html and haven't found any overflow issues in my other template views
custom.css
.my-custom-scrollbar
{
position: relative;
max-height: 25%;
overflow: auto;
}
.table-wrapper-scroll-y {
display: block;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
I think I'm not including something in the CSS. any help would be appreciated.
Edit: Picture added below for clarification. Lots of whitespace that extends to where the table ends without the y scroll.
Bootstrap applies a margin-bottom of 20px to the ".table" class. If you inspect the table in the console - you will be able to see that styling.
In order to remove this- you will need to over-ride the style rule in your own styling (note that this MUST be after the Bootsrtrap styles are imported).
.table {
margin-bottom: 0;
}