joomla
Pagination not responsive on mobile
Steps to reproduce the issue
Create enough content items to have ~10 or more pages of items in list view on the front end.
View the front end on a mobile device.
Expected result
The width of the pagination never exceeds 100vw when there are lots of pages. Ideally some items in the middle should be removed and replaced with an ellipsis to maintain a maximum width within the viewport. Eg: First,1,2,3,...,8,9,10,Last.
Actual result
The pagination is wider than the rest of the view and creates extra space off screen to the right of the content. When scrolled the window can move left to right due to the overflow.
System information (as much as possible)
Php 7.4 Joomla 4 beta 7
Additional comments
I'm also waiting for a fix for the mobile... Better reduce to 6 max element to show, or customizable element number by backend. I hope it will solved as soon as possible: it's strange that this issue is still present.
Here a fix for fontend J4 by pagination override.
- make an override of joomla/pagination layout
- edit YOUR-TEMPLATE/html/layouts/joomla/pagination/list.php
- after
<?php echo $list['previous']['data']; ?>add this code:
<?php
$maxPages = 5;
$list["pages"] = array_values($list["pages"]);
while (count($list["pages"]) > $maxPages) {
foreach ($list["pages"] as $key => $val) {
if (!$val["active"]) {
break;
}
}
if ($key > $maxPages / 2) {
array_shift($list["pages"]);
} else {
array_pop($list["pages"]);
}
}
?>
- change maxPages value to set the max number of page displayed by pagination
@richard67 can you change the flag to backend template as its not a frontend screen?
@coolcat-creations The issue was reported for the frontend according to its description, that's why it was added by @chmst . A later comment said it also affects backend. Will remove the label for now.
Ah thank you, just submitted a PR for Frontend so if that will be hopefully merged it will only be a backend issue
Please test #37711 for the frontend. Thanks in advance.
As the comment above https://github.com/joomla/joomla-cms/issues/32674#issuecomment-832301576 says, there is also an issue in backend, so I leave this here open.
Nice hack, but I've expected also some ellipsis inside. Could be extended to adjust the length according to the viewport?
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/32674.
The solution may be best handled with JavaScript so the viewport can be taken into consideration?
it does not need javascript. it can be done with pure css.
Two examples
https://codepen.io/brianteeman/pen/ExLapJV
https://codepen.io/brianteeman/pen/dyePjrN
But the first is probably the best
Maybe this is something that @crystalenka can look at with the JXT
Until the changes get implemented, as I didn't really know where to add the code and the css, I made a slider for the navigation. In the blog.php I've included <div style="overflow-x:auto;"> before the navigation, and it solved the mobile-friendliness for me.
Is there any update on this? This bug was reported nearly 2 years ago and it impacts the mobile friendliness out-of-the-box...
Use my fix: https://github.com/joomla/joomla-cms/issues/32674#issuecomment-1095065752
Closing as having a pull request. Please test #40620 . Thanks in advance.
I think we are looking for something like the video below. It is done by a template override on joomla.pagination.list. I will try to find out how this can be pushed back into the project on a proper way.
https://github.com/joomla/joomla-cms/assets/639822/a97f64bb-e849-42d5-9166-8e147c0c0efe
Good, better have arrows in the extreme left and right side to improve UI usage: it is easier and faster to identify and click to move to the next page.
My example was not about the arrows. My example is about hiding elements when there is space to place them and prevent the pagination go out of bounds.
Arrows, chevrons and/or text for the outer pagination links it out of scope for the issue.
Of course @hans2103, i know this issue well, i fixed it temporarily with an override to reduce the page numbers by PHP with https://github.com/joomla/joomla-cms/issues/32674#issuecomment-1095065752
Work in progress https://github.com/hans2103/joomla-cms/tree/feature/5.0-dev/responsive-pagination
I am adding a page-item-offset-[#] className to the list items of the pagination (except the list items containing className .start, .prev, .active, .next, .last)
The page items are initially hidden with display none and will be shown after certain breakpoints.
The ... have not been added yet.
feel free to attribute https://github.com/hans2103/joomla-cms/commit/c2da14ce1c192d81f0f26f1f0b56a13a539ba39f
I am adding a
page-item-offset-[#]className to the list items of the pagination (except the list items containing className.start,.prev,.active,.next,.last) The page items are initially hidden with display none and will be shown after certain breakpoints.
No need to add anything. Surely this is the ideal usecase for the css nth-of-type etc
Something as simple as this scss should do it.
.page-item {
@media (max-width: 767.98px) {
display: none;
&:nth-of-type(4) {
position: relative;
padding-right: 50px;
&::after {
content: '\2026';
position: absolute;
font-size: 24px;
top: 0;
left: 45px;
}
}
&:nth-child(-n+4),
&:nth-last-child(-n+4) {
display: block;
}
&:nth-last-child(-n+4) {
&::after {
content: none;
}
}
}
}
Which will produce
Just add it to build\media_source\templates\site\cassiopeia\scss\vendor\bootstrap_pagination.scss build\media_source\templates\administrator\atum\scss\vendor\bootstrap_pagination.scss
@brianteeman please do not use px but rem instead.
People might change the default font-size of their browser or other tools and your suggestion does not follow this change.
It's not a pr just an example for those better than me to follow as a start. It's the same I posted as a codepen last year
@richard67 can you change the flag to backend template as its not a frontend screen?
For backend template you make override \administrator\templates\YOUT_BACKEND_TEMPLATE\html\layouts\joomla\pagination\links.php and
before <?php foreach ($pages['pages'] as $k => $page) : ?> you add:
<?php
$maxPages = 5;
$pages["pages"] = array_values($pages["pages"]);
while (count($pages["pages"]) > $maxPages) {
foreach ($pages["pages"] as $key => $val) {
if (!$val["active"]) {
break;
}
}
if ($key > $maxPages / 2) {
array_shift($pages["pages"]);
} else {
array_pop($pages["pages"]);
}
}
?>
Hello, I encountered the same issue with one site, and discovered this topic. So I tested in cassiopeia : and the issue is there too. So, how to enahnce cassiopeia with at least the css code given by @brianteeman ? it should be an option ( or not )
