Four "G"'s appear above [Print] button
Four "G"'s appear above [Print] button
PayrollXL
Posts: 15Questions: 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
After some trial and error, I have discovered that the "g g g g" text appears when there are detail rows to show. If I comment out the all of the <td> sections within the for loop (so that it only shows empty <TR> elements, the text goes away. This tells me that it must be something in the data that is throwing this out there. Now I just need to figure out where it is.
Thanks for your tips!
Okay, another update. I understand why there are 4 'g's listed. There are 4 rows in the result set. When I filtered out a row it showed only 3 'g's. For some reason it is adding one for each row returned in the result set.
I may try to replace the result set with a list of dictionaries and see if the 'g's go away.
Do you mean something like this example?
Try commenting out the Datatables init code in the second code snippet. Do you still see the
g's?Possibly you can create a test case to show the issue so we can help debug. I'm thinking that you can use the browser's View Source option to see the HTML generated by the for loop. Otherwise use the browser's developer tools to inspect the page. Copy the generated HTML into this template:
https://live.datatables.net/
Maybe we can see the issue and help debug.
Kevin
Okay, here is the link:
https://live.datatables.net/gowekefi/1/edit?html,css,js,output
Your HTML isn't valid - it has spurious
gs in it:Fix that and the problem will be addressed
.
Allan
Thanks for the test case, it helps a lot! Looks like the generated HTML has a
gfollowing a closingtd, for example:The for loop has this
g:Try removing the
gand let us know if the problem is solved.Kevin
Great minds...
YIKES!!!
I've been staring at this code for 2 days and didn't notice that, but I really wasn't looking at the HTML. I assumed it was something in the JQuery or in my Django view.
I guess having some different eyes look at this was the what was needed!
Thanks for all contributions! This is all set now.