How can I get a PagedList.Pagecount and @Html.PagedListPager to display on same line?

Question

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.

Answer 1

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.