search

whiteoctober / Pagerfanta

Pagination for PHP.
Other
1.59k stars 2 forks source link

view too wide on mobile with bootstrap 4 #255

Closed dirkjf closed 6 years ago

dirkjf commented 6 years ago

I am using the paginator with the bootstrap 4 template, which looks like this: image

The issue is that on a mobile phone this does not fit. Is there a way to limit the 1, 2, 3, 4, 5, 6, 7, ... 18 to perhaps 1, 2 ... 17, 18 on mobile only? On a bigger display the original looks fine. I know I could change the proximity setting, but that doesn't really do the trick for a dynamic display.

sampart commented 6 years ago

Hi @albawan. I can only think of a couple of ways of doing this:

  1. Extends the bootstrap template class to make your own which provides more classes on the items rendered, then use CSS and something like media queries to dynamically hide them based on window size.
  2. Create two separate HTML fragments (narrow and wide) and dynamically display the right one in your page.

A variant of (2) - if you're using Symfony, you could use the Pagerfantabundle which has an associated Twig extension, allowing you to specify the proximity in the template itself.

I appreciate that neither of these is an ideal solution, but hopefully this is better than nothing.

Thanks Sam

dirkjf commented 6 years ago

Hi Sam,

Thank you so much for your suggestions. I managed to improve it by overriding the template in the following fashion:

    'prev_message'        => '&larr; <span class="d-none d-sm-inline">Previous</span>',
    'next_message'        => '<span class="d-none d-sm-inline">Next</span> &rarr;',

This hides the words "previous" and "next" on small displays.

That combined with the proximity setting in twig (yes, I use the Pagerfantabundle) at least makes it so that on a mobile device it fits. For those wanting to know how to set the proximity in twig, this is how it is done: {{ pagerfanta(paginator, 'my', { 'proximity': 1}) }}

If anyone wants to see a dynamic example, I use it on this page. It's not exactly what I had in mind, but it works quite well.

sampart commented 6 years ago

@albawan thanks so much for sharing how you did this; I'm sure that'll be really useful for others. Are you happy to close this issue now?

dirkjf commented 6 years ago

@sampart, of course, I'll close it. Thanks again for your suggestions.