In my MVC View, I have a PagedList.PagedCount
and @Html.PagedListPager
that successfully display their data, but they appear on separate lines because the PagedList.PagedCount
is rendered as text without a tag and @Html.PagedListPager
is rendered as a div block. So it makes sense that there would be a line break. But is there any way to get them on the same line?
So far, I have tried without success:
(1) Wrapping it with a <div style="display:inline-block">
wrapper as well as
<div style="display:inline">
and it had no effect.
(2) Taking out any spaces between both sets of code. (It makes sense now, but I tried anyway.)
This is the code that shows the Page count and page buttons.
Page @(pagedList.PageCount < pagedList.PageNumber ?
0 : pagedList.PageNumber) of @pagedList.PageCount
@Html.PagedListPager(pagedList, page => Url.Action("Index",
new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))
This is what it looks like in the browser.
This is what the browser source looks like:
I could try digging into the PagedListPager css class, but at first I wanted to see if anyone knew of a way to place both items on the same line without breaking open the css class.
This might be a bit of a hack, but can you try your inline styles with an !important
attribute ?
<div style="display:inline-block !important">
Failing that, you could wrap the page count in a div, and add float:left
to both that and the pagination-container
class.
Edit after comments
I've used the following in an example project and the div's now appear side-by-side. I've created two new div elements and added vertical-align:middle
and display:inline-block
to them both.
The Razor view :
<div class="page-count" style="display:inline-block; vertical-align:middle;">
Page @(Model.PageCount < Model.PageNumber ?
0 : Model.PageNumber) of @Model.PageCount
</div>
<div class="pagination" style="display:inline-block; vertical-align:middle;">
@Html.PagedListPager(Model, page => Url.Action("Index",
new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))
</div>
The rendered HTML :
<div style="display:inline-block;vertical-align:middle;" class="page-count">
Page 5 of 100
</div>
<div style="display:inline-block;vertical-align:middle;" class="pagination">
<div class="pagination-container"><ul class="pagination"><li><a href="/?page=1">1</a></li><li><a href="/?page=2">2</a></li><li><a href="/?page=3">3</a></li><li><a href="/?page=4">4</a></li><li class="active"><a>5</a></li><li><a href="/?page=6">6</a></li><li><a href="/?page=7">7</a></li><li><a href="/?page=8">8</a></li><li><a href="/?page=9">9</a></li><li><a href="/?page=10">10</a></li><li class="disabled PagedList-ellipses"><a>…</a></li><li class="PagedList-skipToNext"><a rel="next" href="/?page=6">»</a></li><li class="PagedList-skipToLast"><a href="/?page=100">»»</a></li></ul></div>
</div>
It's not the cleanest solution using inline styles obviously.