I am using the Victor Hugo template that was initially hosted on Netifly. The only problem I am having is applying any kind of inline style or container to getting the paginator nav to build in a column. It is generating a row and all the buttons are positioned absolute left.
This is what is generated:
<div class="" style="flex-direction: row;align-content: center;">
<ul class="pagination">
<li class="page-item">
<a href="/post/" class="page-link" aria-label="First"><span aria-hidden="true">««</span></a>
</li>
<li class="page-item disabled">
<a href="" class="page-link" aria-label="Previous"><span aria-hidden="true">«</span></a>
</li>
<li class="page-item active"><a class="page-link" href="/post/">1</a></li>
<li class="page-item"><a class="page-link" href="/post/page/2/">2</a></li>
<li class="page-item">
<a href="/post/page/2/" class="page-link" aria-label="Next"><span aria-hidden="true">»</span></a>
</li>
<li class="page-item">
<a href="/post/page/2/" class="page-link" aria-label="Last"><span aria-hidden="true">»»</span></a>
</li>
</ul>
</div>
This is one of the solutions I’ve tried:
<div class="nav" style="flex-direction: row;align-content: center;">
{{ template "_internal/pagination.html" . }}
</div>
What I want is for the template to generate within a container that I can apply some flex-box styling to it.
Here is how it renders on the screen: