Problem with pagination

[tsp003]

I've got a problem with my pagination with one of my components on my Joomla 2.5 website. I no longer have a subscription with the developers so they won't help me.

Basically the pagination in this component is vertical instead of horizontal, as in the picture below. .

I've tried it with the default joomla templates and the problem remains, however the pagination in the rest of the joomla site (such as in articles) is fine, this leads me to believe that it's something in the component CSS that is causing the trouble, but I can't locate the problem or work out what needs to be changed.

The HTML is:

<tfoot>

            <tr>

                <td colspan="8" class="jbj_row3">

                    <?php echo $this->pageNav->getListFooter(); ?>

                </td>

            </tr>

        </tfoot>

The PHP is:

function getJobList(){



        $app =& JFactory::getApplication();

        $db = & JFactory::getDBO();



        $limit      = $app->getUserStateFromRequest('global.list.limit', 'limit', $app->getCfg('list_limit'), 'int');

        $limitstart = JRequest::getVar('limitstart',0,'','int');



        $now = date('Y-m-d');//, time() + ( $app->getCfg('offset') * 60 * 60 ) );

        $where = " WHERE a.is_active='y' and a.expire_date >= '".$now."' and a.publish_date <= '".$now."' and a.expire_date <> '0000-00-00 00:00:00'";



        $query = "SELECT COUNT(*) FROM #__jbjobs_job a".$where;

        $db->setQuery( $query );

        $total = $db->loadResult();



        jimport('joomla.html.pagination');

        $pageNav = new JPagination( $total, $limitstart, $limit );



        $query = "SELECT a.*,b.id id_spec,b.specialization,c.country,c.id AS countryid,d.id id_employer,d.comp_name,d.show_comp_name,e.id id_exp,e.exp_name,jc.category,jc.id id_jobcateg,if(a.hotjob_expire>now(), true, false) is_hot FROM #__jbjobs_job a".

                 " LEFT JOIN  #__jbjobs_job_spec b ON a.id_job_spec = b.id".

                 " LEFT JOIN #__jbjobs_job_categ jc ON jc.id = b.id_category". 

                 " LEFT JOIN  #__jbjobs_country c ON a.id_country = c.id".

                 " LEFT JOIN  #__jbjobs_employer d ON a.employer_id = d.user_id".

                 " LEFT JOIN #__jbjobs_job_exp e ON a.id_job_exp = e.id".

        $where .

                 " ORDER BY is_hot DESC, a.is_featured DESC, a.publish_date DESC, a.id DESC";

        $db->setQuery( $query, $pageNav->limitstart, $pageNav->limit );

        $rows = $db->loadObjectList();

        $return[0] = $rows;

        $return[1] = $pageNav;

        return $return;

The related CSS is:

.jbj_row3 {

    padding: 5px 10px;

    background: #E9ECEE;

    border-bottom: 3px solid #ccc;

}

I've seen a few posts with the same kind of problem that say to place display: inline to the main CSS template. I've tried it both in the main and component CSS file and it has no effect. So i'm really not sure how to go about tackling this one. Does anyone have any ideas. I feel i may be approaching this one from totally the wrong angle. Thank you

[Wolf_2]

Maybe set the height width and float it left,

hope it helps :)

[tsp003]

Thanks Wolf, tried it but it only resizes the grey area, not the actual pagination menu, which stays vertical. I keep thinking I need to do something with the main template CSS, but as everything else on the site is working with the default pagination, I don't want to start messing with it unless i have to. I'm stumped! :/

[gentlemedia]

It's hard to say from an image why it doesn't line up next to each other, but as far as I can see what happens is that the page nav is marked-up with an unordered list, but is unstyled (or has still the default styling... hence the vertical alignment and the bullets).

Also the PHP echo says 'get pagenav out of function getListFooter()', but you post the PHP here of function getJobList().

Can you share a link with us to that page, because it's a CSS issue anyway and we need to see what eventually the HTML output is in order to track the problem and solve it.

[tsp003]

Hi Gentlemedia, thanks for replying, unfortunately the site isn't available online as I'm building it on a local level.

All I can add is that from my digging around in the code of the site is that the function getJobList is what the component uses to build the page content (as shown in the php sample above) and function getListFooter appears to be calling the default joomla pagination footer. Perhaps this component shouldn't be using this function at all, but removing it breaks the page.

The site also appears to use class="uk-pagination" throughout, perhaps this may be whats missing, but I dont know where to start to incorporate it.

[gentlemedia]

There are tools to share an URL from your local server.
https://ngrok.com/

Anyways... It's hard to debug with the information you posted. You have to look which class gets added to the unordered list and use that as CSS hook to align the items (either by using float, display: inline or display: inline-block).

The table cell which is holding the navigation spans 8 columns so it shoud be wide enough, but by using tables for layout might give you more layout issues along the way.

[tsp003]

Not sure if this will help but this is the html output for the footer.

<div class="">
<table style="width: 100%; border-collapse:separate; border-spacing: 0px; padding: 0px;">
<tfoot>
<tr>
<td class="jbj_row3" colspan="7">
<div class="list-footer">
<div class="limit">
<ul>
<div class="counter">Page 1 of 8</div>
<input type="hidden" value="0" name="limitstart">
</div>
</td>
</tr>
</tfoot>
<tbody>
</table>
</div>

[gentlemedia]

Thanks, that made things much more clear to me.
Errr... that markup is a bit messy :)
div .list-footer or div .limit doesn't get closed properly.
There's only an opening ulbut for the rest there are no list items (li), but on your image I see them, so this is a mystery to me too and lastly at the end there's only an opening tbody.

No wonder you have display issues. Somewhere in a PHP function that builds up the HTML for that pagination it goes wrong. But also the table used for the layout has missing closing elements.

[tsp003]

Thanks again for the reply :)

As i didn't code the component I have no clue how to start putting it right, so i guess it's beyond me, I'll just comment out the pagination from the page for the time being and hope that I can work it out when im a bit more experienced.

Thanks again for your time

[Wolf_2]

Since its Joomla there are are plenty of free compomants, maybe just change the componant. Theres probably one just like it that doesnt cause the problem, after that compare the two and see what the difference is, that would probably answer your question. :)

Peace

[tsp003]

Thanks to all that replied. Changing the component isn't an option, mostly because it was incredibly expensive! but I do actually seem to have solved the problem.

After much digging about I changed the <ul> tag found in libraries/joomla/html/pagination.php to <ul class="uk-pagination"> and it seems to have done the trick, everything is working as expected now, so i'll mark as closed.

[gentlemedia]

Be aware that by adding or changing code in core files there is the risk that you'll lose it when there is a Joomla update. By a complete version upgrade you will definitely loose your changes.

If you need to make changes to modules and layout files, you will need to make a copy from the file and add those changes in there and place it in a 'html' directory in your template directory, so that you override the original core file.

https://docs.joomla.org/Understanding_Output_Overrides