Don't hide pagination at the top of threads on mobile

RobinHood

Well-known member
With XF2, when on mobile, if you open a thread that doesn't have unread posts then there is no jump to new button and the the pagination buttons are hidden.

This can be frustrating if you want to head straight to the last page or any other page.

Without the page buttons you don't have context when the page loads as to how long the thread really is, then you have to scroll all the way to the bottom of the page just to find a link to bring you to the end of the thread.
 
Upvote 96
The reason it‘s hidden is cause of the overall narrow viewport on mobile devices. The more elements above the actual content the more users have to scroll to view said content. It makes sense and is a good design decision imo.
I agree, however, that XF could offer a toggle in the style editor to enable top pagination controls without template edits.
 
It doesn't make sense when it compromises on usability, they were just fine there in XF1. Navigation elements shouldn't be (solely) at the bottom of the page, and that's what the pagination button are.

They take up about 20px in height, and the entire page could be thousands of pixels tall. The few extra pixels of scrolling at the top of a page shouldn't be a consideration in this case if it means you have to swipe multiple times to reach the bottom of the the thread just to navigate to another page.

Plus, being able to see the buttons at the top of the page before you start scrolling gives you context as to where in the thread you are, otherwise it looks like you're always on the first page of a short thread.

If you're on a very long thread trying to browse to find a specific post, then after each page load you have to scroll all the way to the bottom to navigate forward or back or pick a specific page.
 
Last edited:
Yep, looking at that now my suggestion applies to that too. Once you're on page 2 or later it's useful to have them at the top.
 
Ohh, I thought you were talking about part of that view:

1519908960397.webp


In your screenshot above I can see why it's hidden and think that makes sense as it's not that useful from outside the thread and makes it look cleaner. Once you tap the title and end up in the thread, as long as the pagination buttons are available at the top then you can jump to any page you like.
 
Someone's just pointed out that for the default Xenforo theme, page numbers for a thread spanning multiple pages appears at both the top and bottom of the page for the desktop version - but on a mobile device the page numbers only show at the bottom. This is forcing users to scroll down to the bottom of the page to change page number.

I know top space is a premium on mobile, but I'd like to suggest this as a user-friendly option in future XF upgrades - perhaps even as a setting. :)
 
The lack of a pagenav at the top is something that our users have pointed out again and again since we switched from vB4 to XF2 about 4 weeks ago. They'd really like to see this. :)

Un-hiding the top pagenav for small viewports is as easy as removing the code block that starts with // Hide any block page nav that goes before the block as we will be wasting vertical space. in the "core_pagenav.less" template. However, I can see why the XenForo developers hid the top pagenav because the result only looks okay-ish but definetely not great.

There must be a better way. Maybe the "Watch" button could be moved below the posts list or inside a menu (triggered by a small icon in the line with the author name and date)? And maybe the "Jump to unread" button (if it exists) could become a simple icon in this line, too?
 

Attachments

  • xenforo.com_community_threads_whats-new-in-xenforo-2-0.133426_(iPhone 5_SE).webp
    xenforo.com_community_threads_whats-new-in-xenforo-2-0.133426_(iPhone 5_SE).webp
    48.2 KB · Views: 113
Last edited:
Sorry for silly question but how do you unhide it? Cheers

I want it to show Mobile with pagination displaying.

Try this in extra.less

CSS:
// top page navigation back in mobiles

.block-outer:not(.block-outer--after) .pageNavWrapper:not(.pageNavWrapper--forceShow)
{
   display: initial;
}
 
Try this in extra.less

CSS:
// top page navigation back in mobiles

.block-outer:not(.block-outer--after) .pageNavWrapper:not(.pageNavWrapper--forceShow)
{
   display: initial;
}
Thanks for the response mate.

However, it works for the Top Pagination.

But I want the one shown below where it says Mobile w/ pagination displaying (ie the thread titles)

I'm not really sure why its hidden there, it doesn't make any difference to the mobile view.

Desktop
View attachment 170143


Mobile
View attachment 170144

Mobile w/ pagination displaying
View attachment 170145
 
That is if you look at

Mobile and Mobile w/ pagination displaying there is a major difference as one has pagination.

I'm not talking about the top of threads on mobile
 
With XF2, when on mobile, if you open a thread that doesn't have unread posts then there is no jump to new button and the the pagination buttons are hidden.

This can be frustrating if you want to head straight to the last page or any other page.

Without the page buttons you don't have context when the page loads as to how long the thread really is, then you have to scroll all the way to the bottom of the page just to find a link to bring you to the end of the thread.

Yes, pagination should be visible at top by default. 👍
 
Top Bottom