Encountering an issue with the template view below. A scrollbar was added to the "Used in" table at the bottom, but there is excessive whitespace beneath it. Removing divs/elements one by one reveals that the problem seems to stem from the table itself.
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"&g;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 %}
A custom.css file is located in the static folder and loaded in base.html as shown below. The overflow issue is specific to this view, without any problems found in other templates when base.html was removed.
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;
}
It appears that something may be missing in the CSS. Any assistance would be greatly appreciated.
Edit: An image has been included below for better clarification. There is a significant amount of white space extending to the end of the table without the y scroll.