[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.
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
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:
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.
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:
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,
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.
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?
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.)