[Resolved] The pagination control line is not responsive

[Author]

Posts

[Francisco Ramón Molina Busquiel]

Hello!

I have a paging control line in a view, but when I resize the browser, the paging control line is not responsive, it is hidden in the zone area of the web page.
hidden link
You can see the problem in the video that I attached: hidden link

Thanks for your help.

Regards,
Jose

[Nigel]

Hi Jose

The pagination controls are added as an unordered list, and the ul container has a class wpv-pagination-nav-links-container with the display property "flex".

It doesn't specify the flex-wrap property, and so defaults to nowrap, meaning that the items do not wrap to the next line when the container width is too small.

You can add the following CSS rule to make that happen:

.wpv-pagination-nav-links-container  {
    flex-wrap: wrap;
}

You could avoid this by a different format for the pagination links that uses elipses, for example. See https://toolset.com/documentation/user-guides/views-pagination/#inserting-pagination-controls for more details.

[Francisco Ramón Molina Busquiel]

Hi Nigel,

But I already have it defined so that the ellipses between the pages are shown as the documentation indicates. But he is not doing it. Look at the screenshots.

Regards,

[Nigel]

It's necessary to provide values for the "Pages to skip" and "Number of preceding and following pages" options, which will add the step and reach attributes to the relevant shortcode, like so:

[wpv-pager-nav-links output="bootstrap" first_last_links="true" previous_next_links="true" step="5" reach="2"]

To best understand them I would experiment with different values until you achieve the result you want.

[Francisco Ramón Molina Busquiel]

Hi Nigel,
I have used the advice you have given me, but it is very relative to use these parameters as you can see in the video that I attached (hidden link), if users enter more items it would be necessary to change the parameters again, depending on the size of the browser it can also stand out from the page, unless the amount of paging elements is made very small according to the indicated parameters. The number of elements of the pagination should be automatically adapted according to the available width size just as other websites that are seen on the internet. The other system that you have indicated to me through CSS is better although it is not too elegant, since the number of lines is growing according to the available width.
Regards,

[Nigel]

You can combine different techniques such as the CSS technique to wrap onto the next line with skipping pages using an ellipsis etc., and if you are concerned about space you can use the direct page number selector in a dropdown.

It is imperfect, buy you could also use conditional shortcodes and the built-in WordPress is_mobile() function to present different pagination controls on different sized screens.

[Francisco Ramón Molina Busquiel]

Nigel, Does Toolset have any shortcode to know the number of pages of a view?
What would the conditional shortcode be like for what you are telling me?

Thanks for your help.
Regards,

[Nigel]

The wpv-found-count shortcode can be used outside the loop and returns the total number of posts returned by the query, from which you could calculate the number of pages (https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-found-count).

To use the WordPress wp_is_mobile() function you would first need to register it at Toolset > Settings > Front-end content.

You could then use it like so:

[wpv-conditional if="( wp_is_mobile() eq '1' )"]
Mobile content here
[/wpv-conditional]

[wpv-conditional if="( wp_is_mobile() eq '0' )"]
Other content here
[/wpv-conditional]

(The function returns a boolean true or false. In such cases you should compare against 1 or zero.)

[Francisco Ramón Molina Busquiel]

Thank you very much for all your help Nigel.