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>
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.
    – pe7er
    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
    – Ruchika
    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?
    – pe7er
    Jan 26, 2023 at 12:43

3 Answers 3

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.

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.

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.