Four "G"'s appear above [Print] button
Four "G"'s appear above [Print] button
PayrollXL
Posts: 11Questions: 3Answers: 1
Somehow, one particular template renders with for lower case g's, each separated by a space. This appears above the [Print] button as shown here.
Here is the Python Django template.
{% if view_method == 'cards' %}
<div class="container mt-4-py-4 align-items-center justify-content-center">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g4">
{% for agency in agency_list %}
<div class="col mb-3">
<div class="card" style="width: 20rem; height: 26rem">
<h5 class="card-title text-center bg-warning text-light p-2">
{{ agency.agency.name }}
</h5>
<p class="card-text agency-address px-5">
{{ agency.agency.address_one}}<br/>{{ agency.agency.city }},
{{ agency.agency.state }} {{ agency.agency.ZIP_code }}<br>
<span class="agency-phone">{{ agency.agency.telephone }}</span>
</p>
<div class="card-body">
Finibus luctus conubia pretium euismod etiam eu pharetra tellus.
Odio consectetur sodales fermentum imperdiet bibendum nec cras
platea commodo efficitur maecenas. Leo pellentesque maximus
dictumst dapibus hac.
</div>
<div class="card-footer">
<a href="{% url 'agency_selected' agency.agency.id %}"
>
<button class="btn btn-primary">Select this Agency</button>
</a
>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% else %}
<div class="container py-2 table-div">
<table id="agencyTable" class="cell-border bg-white">
<thead>
<tr>
<th> </th>
<th>Agency Name</th>
<th>Address</th>
<th>City</th>
<th>State</th>
<th>ZIP Code</th>
<th>Telephone</th>
</tr>
</thead>
<tbody>
{% for agency in agency_list %}
<tr>
<th>
<a href="{% url 'agency_selected' agency.agency.id %}" tooltip="Select this agency">
<button class="btn btn-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-pencil-square" viewBox="0 0 16 16">
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
<path fill-rule="evenodd"
d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"/>
</svg> Select</button></a>
<a href="{% url 'check_setups' %}" tooltip="Paycheck alignment/setup">
<button class="btn btn-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-credit-card-2-front" viewBox="0 0 16 16">
<path d="M14 3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zM2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z"/>
<path d="M2 5.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5m3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5m3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5m3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5"/>
</svg> Checks</button></a>
</th>
<td>
<a href="{% url 'agency_selected' agency.agency.id %}">
{{ agency.agency.name }}
</a>
</td>
<td>
{{ agency.agency.address_one }}
</td>g
<td>
{{ agency.agency.city }}
</td>
<td>
{{ agency.agency.state }}
</td>
<td>
{{ agency.agency.ZIP_code }}
</td>
<td>
{{ agency.agency.telephone }}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
{% endblock content %}
{% block javascript %}
<script type="text/javascript">
$(document).ready(function () {
$('#agencyTable').DataTable({
columnDefs: [
{
targets: 0,
className: 'noExport'
}
],
layout: {
topStart: {
buttons: [
{
extend: 'print',
className: 'print-button',
exportOptions: {
columns: ':not(.noExport)'
},
customize: function (win) {
{#$(win.document.body)#}
{# .css('font-size', '9pt')#}
$(win.document.body)
.find('table').addClass('display')
.addClass('compact')
.css('font-size', 'inherit');
$(win.document.body).find('tr:nth-child(odd) td').each(function (index) {
$(this).css('background-color', '#D0D0D0');
});
$(win.document.body).find('table').addClass('display').css('font-size', '12px');
$(win.document.body).find('h1').css('text-align', 'center');
},
title: 'Agency List'
}
]
}
}
});
});
</script>
{% endblock javascript %}
The version that renders in this example is a grid list so the else block is the code that is involved in this example.
Any ideas on where this is coming from? When I view the page source, they are not there, and they are definitely not in the template, so they must be created somewhere in the DataTables library.
Thanks!
Bob
Replies
Hi Bob,
I'd need a link to test case showing the issue please. None of the examples show that behaviour and if it only happens in one of your use cases, then there is something funny with that one.
Allan
I would right click and inspect the four
gs. Maybe that will give a clue where they are from. I've never seen or heard of Datatables doing anything like that. It could be something above the if statement or something that is inserted using Javascript code.Kevin