fix: add flex-wrap
to pagination
elements (#3822)
They seem to be one of the only bs5 elements that do not by default wrap, which causes display issues on narrow screens when there are lots of page elements, e.g., on http://127.0.0.1:8000/doc/draft-ietf-ipwave-vehicular-networking/ Adding `flex-wrap` (per https://github.com/twbs/bootstrap/issues/23504) makes this better, but unfortunately doesn't fix it completely, because the layout still jumps when the window is narrowed by the used. It does fix the issue on first load and after a reload though.
This commit is contained in:
parent
310e828262
commit
81fe7a15cf
|
@ -22,7 +22,7 @@
|
|||
<div class="col-md-10">
|
||||
{% if all_ballots and all_ballots|length > 1 %}
|
||||
<label class="my-1 fw-bold">Ballots:</label>
|
||||
<ul class="pagination pagination-sm">
|
||||
<ul class="pagination pagination-sm flex-wrap">
|
||||
{% for b in all_ballots %}
|
||||
<li class="page-item{% if b == ballot %} active{% endif %}">
|
||||
<a class="page-link" href="{% url "ietf.doc.views_doc.document_ballot" name=doc.name ballot_id=b.pk %}">
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
{% origin %}
|
||||
<label class="my-1 fw-bold">Versions:</label>
|
||||
<nav class="mb-3">
|
||||
<ul class="pagination pagination-sm">
|
||||
<ul class="pagination pagination-sm flex-wrap">
|
||||
{% for rev in revisions %}
|
||||
<li class="page-item {% if rev == doc.rev %}{% if snapshot or doc.get_state_slug != 'rfc' %}active{% endif %}{% endif %}">
|
||||
<a class="page-link"
|
||||
|
@ -18,4 +18,4 @@
|
|||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</nav>
|
||||
</nav>
|
||||
|
|
|
@ -155,7 +155,7 @@
|
|||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<ul class="pagination pagination-sm mb-3">
|
||||
<ul class="pagination pagination-sm flex-wrap mb-3">
|
||||
<li class="page-item {% if not page.has_previous %}disabled{% endif %}">
|
||||
<a class="page-link" aria-label="<"
|
||||
href="{% if not page.has_previous %}#{% else %}?page={{ page.previous_page_number }}{% endif %}">
|
||||
|
@ -181,4 +181,4 @@
|
|||
</p>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block js %}{{ formset.media.js }}{% endblock %}
|
||||
{% block js %}{{ formset.media.js }}{% endblock %}
|
||||
|
|
Loading…
Reference in a new issue