0

Facing problem in joomla pagination when component upgraded from joomla 3 to 4 enter image description here

with same css, although buttons are working in joomla 4 with click taking to prev, first on left side and on right side to next and last

Pls guide on what to do to have text writted as prev, first on left and next, last on right side

On checking source code coming as Coming as

<li class="disabled page-item"> <span class="page-link" aria-hidden="true"><span class="icon-angle-double-left" aria-hidden="true"></span></span> </li> <li class="disabled page-item"> <span class="page-link" aria-hidden="true"><span class="icon-angle-left" aria-hidden="true"></span></span> </li> <li class="active page-item"> <a aria-current="true" aria-label="Page 1" href="#" class="page-link">1</a> </li> <li class="page-item"> <a aria-label="Go to page 2" href="/6jan2023/index.php?option=com_offers&amp;view=schemes&amp;Itemid=9&amp;limitstart=20" class="page-link"> 2 </a> </li> <li class="page-item"> <a aria-label="Go to page 3" href="/6jan2023/index.php?option=com_offers&amp;view=schemes&amp;Itemid=9&amp;limitstart=40" class="page-link"> 3 </a> </li> <li class="page-item"> <a aria-label="Go to page 4" href="/6jan2023/index.php?option=com_offers&amp;view=schemes&amp;Itemid=9&amp;limitstart=60" class="page-link"> 4 </a> </li> <li class="page-item"> <a aria-label="Go to page 5" href="/6jan2023/index.php?option=com_offers&amp;view=schemes&amp;Itemid=9&amp;limitstart=80" class="page-link"> 5 </a> </li> <li class="page-item"> <a aria-label="Go to page 6" href="/6jan2023/index.php?option=com_offers&amp;view=schemes&amp;Itemid=9&amp;limitstart=100" class="page-link"> 6 </a> </li> <li class="page-item"> <a aria-label="Go to page 7" href="/6jan2023/index.php?option=com_offers&amp;view=schemes&amp;Itemid=9&amp;limitstart=120" class="page-link"> 7 </a> </li> <li class="page-item"> <a aria-label="Go to page 8" href="/6jan2023/index.php?option=com_offers&amp;view=schemes&amp;Itemid=9&amp;limitstart=140" class="page-link"> 8 </a> </li> <li class="page-item"> <a aria-label="Go to page 9" href="/6jan2023/index.php?option=com_offers&amp;view=schemes&amp;Itemid=9&amp;limitstart=160" class="page-link"> 9 </a> </li> <li class="page-item"> <a aria-label="Go to page 10" href="/6jan2023/index.php?option=com_offers&amp;view=schemes&amp;Itemid=9&amp;limitstart=180" class="page-link"> 10 </a> </li> <li class="page-item"> <a aria-label="Go to next page" href="/6jan2023/index.php?option=com_offers&amp;view=schemes&amp;Itemid=9&amp;limitstart=20" class="page-link"> <span class="icon-angle-right" aria-hidden="true"></span> </a> </li> <li class="page-item"> <a aria-label="Go to end page" href="/6jan2023/index.php?option=com_offers&amp;view=schemes&amp;Itemid=9&amp;limitstart=2800" class="page-link"> <span class="icon-angle-double-right" aria-hidden="true"></span> </a> </li>
Improve this question
3
  • Can you see the text of the labels in the HTML source of the Joomla 4 website? If so, check the CSS on those elements. Maybe the CSS makes the color of the text the same as the background color. Commented Jan 26, 2023 at 10:00
  • html source code added., i think font awesome or<span class="icon-angle-right" or <span class="icon-angle-double-right" need to be referred in css. pls advice on how to add in font awesome Commented Jan 26, 2023 at 10:17
  • I do not see any <a href links for the "start" + "prev" links. Is it the HTML source code of the page when you have page 3 selected? Commented Jan 26, 2023 at 12:43

3 Answers 3

Reset to default
0

The class names of those 4 buttons are probably not correct to get font awesome icons. You have:

<span class="icon-angle-double-left" <span class="icon-angle-left" <span class="icon-angle-right" <span class="icon-angle-double-right"

I don't know which font awesome icon classes you need. You probably have to change <span class="icon-angle-left" to something like <span class="fa-solid fa-arrow-left"

You could do that via a template override for the pagination.php file.

Improve this answer
0

I have a workaround that displays the text on the buttons after updating from Joomla 3 to 4.

I edited the link.php in /layouts/joomla/pagination/ and commented out the four lines that start with "$icon =".

Now the code looks like this:

// Check for "Start" item case Text::_('JLIB_HTML_START'): //$icon = $app->getLanguage()->isRtl() ? 'icon-angle-double-right' : 'icon-angle-double-left'; $aria = Text::sprintf('JLIB_HTML_GOTO_POSITION', strtolower($item->text)); break; // Check for "Prev" item case $item->text === Text::_('JPREV'): $item->text = Text::_('JPREVIOUS'); //$icon = $app->getLanguage()->isRtl() ? 'icon-angle-right' : 'icon-angle-left'; $aria = Text::sprintf('JLIB_HTML_GOTO_POSITION', strtolower($item->text)); break; // Check for "Next" item case Text::_('JNEXT'): //$icon = $app->getLanguage()->isRtl() ? 'icon-angle-left' : 'icon-angle-right'; $aria = Text::sprintf('JLIB_HTML_GOTO_POSITION', strtolower($item->text)); break; // Check for "End" item case Text::_('JLIB_HTML_END'): //$icon = $app->getLanguage()->isRtl() ? 'icon-angle-double-left' : 'icon-angle-double-right'; $aria = Text::sprintf('JLIB_HTML_GOTO_POSITION', strtolower($item->text)); break;

and the text on the buttons will be displayed.

Improve this answer
0

A similar problem came up in a custom template I was upgrading to work with a site upgraded from Joomla 3 to Joomla 4. It wasn't text that was missing, but the icons (added with FontAwesome) were not showing. The custom template needed to have Font Awesome style included.

Adding the following code to the section was a quick and easy fix (once I figured it out). I added it right before my template's stylesheet, so that always has final say.

<link href="media/system/css/joomla-fontawesome.min.css" rel="stylesheet" />

There is a "proper" method to add FontAwesome with the new web asset manager but if you need a quick fix to patch up an existing site, that should do.

If you need/want text rather than icons, you probably do need to go with a template override.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.