[#37711] - J4.x Fix Pagination Float and Wrap on mobile Cassiopeia
- Closed
- 1 Sep 2022
- Medium
- Build: 4.1-dev
- # 37711
- Diff
- coolcat-creations:cassi-paginationfix
User tests: Successful: Unsuccessful:
I actually wanted to create a PR for issue #32674 but it's wrongly assigned to frontend while the Screenshot in the Issue is the Backend. However the Pagination in Frontend was broken on mobile too, so I fixed it with flex-wrap class in the pagination and I adjusted the Pages Information to only float-end from mid-screen size.
Testing Instructions
Create some articles to have a large Pagination list or fake it with the browser inspector.
On Mobile the pagination should not break the layout.
- Check Blog and Category List Layout
- Check Com Contact Layout
- Archive Layout
Actual result BEFORE applying this Pull Request
Don't mind the wrong pagination numbers as I faked the page Items instead of creating more articles)
Expected result AFTER applying this Pull Request
Documentation Changes Required
No
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Front End com_contact com_content Layout |
Looks good but seems it involves Javascript I don't know for sure how to implement. Maybe something similar to this: https://codepen.io/allicarn/pen/jPowab
| Labels |
Added:
?
|
||
This pull requests has automatically rebased to 4.2-dev.
This pull requests has been automatically converted to the PSR-12 coding standard.
| Status | Pending | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2022-09-01 14:24:05 |
| Closed_By | ⇒ | coolcat-creations | |
| Labels |
Added:
?
?
Removed: ? |
||
@HLeithner sorry I had massive issues with my repo and deleted it. should I bring back this PR? I mean it's obviously not solved the right way maybe someone with JS Skills can help?
Yes please fix it, maybe as brian suggested, this can be done with css only, you only need a new element for ... the rest should work with css classes (sadly only for bootstrap...).
So please fix it as you suggested.
How do you mean with css like Brian suggested? I think JS is needed tbh - can you show me an example how to fix with css?
thank you. Second one seems to work I will try to create a new PR
Hi all! I'm bad at php. Could you tell me how to apply this css code for my template Cassiopeia. I inserted the CSS code and replace the old code, but did not achieve the desired result.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/37711.
https://frenchpalm.com/ - here is my site. After pasting the css suggested brianteeman my list is limited to 10 pages, but there are more than 25 pages and I need it to look as beautiful as the screenshot above.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/37711.
Why was this fix not being implemented? It's now almost 2 years.
Why was this fix not being implemented? It's now almost 2 years.
Can you create a PR? I will be happy to test it
Why was this fix not being implemented? It's now almost 2 years.
Can you create a PR? I will be happy to test it
I asked to get access to the Pull Request. Lets see if someone wakes up.
In my option this is a big design bug in Joomla. Not sure why this has been ignored for so long.
Good day! As I see on Joomla 4.3 this problem is not solved. I can give you access to my site to fix it and maybe this fix will become global at a later date.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/37711.
Hello! I am also waiting for this problem to finally be solved, if there is a temporary solution, please share.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/37711.
my bad... sorry
Shouldn't a mobile pagination be truncated in the middle instead of wrapped?