Pagination Link Issue

We have a CListView view with paging. The page block includes previous and next buttons when they are not relevant.

On Page 1: Previous link is still active (visible and active even though hidden class is added)

On last page: Next link is still active (visible and active even though hidden class is added)

CSS: We have appropriate .hidden selectors

Is this a known defect or how can we diagnose?

$this->widget('zii.widgets.CListView', array(

            'id'=>'friendResults',

            'dataProvider'=>$searchResults,

            'pager'=>array(

                'header'=>'',

                'footer'=>'',

                'cssFile'=>false,

                'firstPageLabel'=>'',

                'lastPageLabel'=>'',

            ),

 ));

Do you have this on all the CListView with pagination of your website or just one?

As I see it, it may be a CSS problem; In your CSS you should have something like:

ul.yiiPager .hidden a

{

	display: none;

}

or maybe an other css property is interfering with this one…

For example try to remove the “‘cssFile’=>false,” and check if your CListView is working. If it is, you’ll know it is a CSS problem!

This is the only pagination built, but there will be many across the site. I added cssFile=true and had the same issue. I added the proposed selector to my css and it wasn’t picked up.

Here is what is produced… the selector you proposed won’t work on this…

<div class="pager">

    <ul class="right" id="yw0">

        <li class="first hidden"><a href="..."></a></li>

        <li class="previous hidden"><a href="...">&lt;</a></li>

        <li class="page selected"><a href="...">1</a></li>

        <li class="page"><a href="...">2</a></li>

        <li class="next"><a href="...">&gt;</a></li>

        <li class="last"><a href="..."></a></li>

    </ul>

</div>

It looks like I have to add display none to container and <a> in this case. Strange. Also this is may be triggering a bad css link.

[color=#881280][font=monospace][size=2]<link [/size][/font][/color][font=monospace][size=2]rel[/size][/font][color=#881280][font=monospace][size=2]="[/size][/font][/color][font=monospace][size=2]stylesheet[/size][/font][color=#881280][font=monospace][size=2]" [/size][/font][/color][font=monospace][size=2]type[/size][/font][color=#881280][font=monospace][size=2]="[/size][/font][/color][font=monospace][size=2]text/css[/size][/font][color=#881280][font=monospace][size=2]" [/size][/font][/color][font=monospace][size=2]href[/size][/font][color=#881280][font=monospace][size=2]="[/size][/font][/color]1[color=#881280][font=monospace][size=2]" />[/size][/font][/color]

By default, the prev and next buttons are not hidden, there are just in a lighter grey so if you want to hide them, you should take the base CSS File and edit it. Don’t edit the one in the framework, copy this one and put it in your assests.

You can find it in "framework/web/widgets/pagers/pager.css", copy it with the others css files and when you call your CListView you can put for example:

'cssFile' => Yii::app()->baseUrl . '/css/pager.css',

Thanks. we did finally find selectors that work well for this.