Skip Navigation

[Gelöst] The pagination control line is not responsive

This support ticket is created vor 5 Jahren. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Heute stehen keine Supporter zur Arbeit im Werkzeugsatz-Forum zur Verfügung. Sie können gern Tickets erstellen, die wir bearbeiten werden, sobald wir online sind. Vielen Dank für Ihr Verständnis.

Sun Mon Tue Wed Thu Fri Sat
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

Dieses Thema enthält 8 Antworten, hat 2 Stimmen.

Zuletzt aktualisiert von Francisco Ramón Molina Busquiel vor 5 Jahren.

Assistiert von: Nigel.

Author
Artikel
#1397277

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.
versteckter Link
You can see the problem in the video that I attached: versteckter Link

Thanks for your help.

Regards,
Jose

#1397519

Nigel
Supporter

Sprachen: Englisch (English ) Spanisch (Español )

Zeitzone: Europe/London (GMT+00:00)

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.

#1397553
pagination02.png
pagination01.png

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,

#1397593

Nigel
Supporter

Sprachen: Englisch (English ) Spanisch (Español )

Zeitzone: Europe/London (GMT+00:00)

Screenshot 2019-12-02 at 12.17.26.png

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.

#1397751

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 (versteckter 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,

#1397795

Nigel
Supporter

Sprachen: Englisch (English ) Spanisch (Español )

Zeitzone: Europe/London (GMT+00:00)

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.

#1397819

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,

#1397859

Nigel
Supporter

Sprachen: Englisch (English ) Spanisch (Español )

Zeitzone: Europe/London (GMT+00:00)

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.)

#1399703

Thank you very much for all your help Nigel.