CodeIgniter Forums
Styling Pagination, extra width?!? - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: Styling Pagination, extra width?!? (/showthread.php?tid=28405)

Styling Pagination, extra width?!? - El Forum - 03-10-2010

[eluser]elaniobro[/eluser]
I got my pagination set up and styled. This is great so far, and plan to make it ajax (no page refresh).

However, after styling and such, I noticed that the right side of the pagination has extra space. While I know I can correct this with a margin-right:-#; I'd rather not use negative integers in my CSS.

Please see my code below to help shed some light:

Controller:
Code:
function index()
        {
            $this->load->library('pagination');

//LIVE
            #$config['base_url'] = 'http://www.example.com/5/index.php/thoughts/index';
//LOCAL
            $config['base_url'] = 'http://localhost:8888/www.example.com/com/5/index.php/thoughts/index';
            $config['total_rows'] = $this->db->get('thoughts')->num_rows();
            $config['per_page'] = 3;
            $config['num_links'] = 5;
            $config['full_tag_open']= '<div class="pagination">';
            $config['full_tag_close']= '</div>';
            $config['prev_tag_open'] = '<div class="pagination-left">';
            $config['prev_tag_close'] = '</div>';
            $config['prev_link'] = '';
            $config['next_tag_open'] = '<div class="pagination-right">';
            $config['next_tag_close'] = '</div>';
            $config['next_link'] = '';
            $config['cur_tag_open'] = '<strong class="pagination-current">';            
            $config['cur_tag_closed'] = '</strong>';            

            $this->pagination->initialize($config);
            $data['records'] = $this->db->order_by('id DESC')->get('thoughts', $config['per_page'], $this->uri->segment(3));
            
            
            $data['title'] = 'example | Thoughts';
            $data['page'] = 'thoughts';
            $data['query'] = $this->db->order_by('id DESC')->get('thoughts');

            $this->load->view('header', $data);
            $this->load->view('campaign');
            $this->load->view('thoughts_view', $data);
            $this->load->view('footer');
            
        }

CSS:
Code:
/*
PAGINATION
*/
.pagination
{
    border:1px solid #f09;
    font-size:11px;    
    text-align:center;
    float:right;
    right:0px;
    width:auto;
    position:relative;
}
.pagination a, .pagination-left, .pagination-right, .pagination-current
{
    float:left;    
    height:15px;
    width:15px;
    text-decoration:none;
    border:1px solid #0f0;
}
.pagination a, .pagination-current
{
    line-height:16px;    
}
.pagination a:link, a:visited
{
    background:#444;    
    color:#fff;
}

.pagination a:hover, .pagination-current
{
    background:#fff;    
    color:#444;
}

.pagination-right a:link,.pagination-right a:visited
{
    background-image:url('../../img/pagination/pagination_right_a.gif');
}
.pagination-right a:hover
{
    background-image:url('../../img/pagination/pagination_right_b.gif');
}
.pagination-left a:link,.pagination-left a:visited
{
    background-image:url('../../img/pagination/pagination_left_a.gif');
}
.pagination-left a:hover
{
    background-image:url('../../img/pagination/pagination_left_b.gif');
}

and a screen shot of what is going on (I threw borders so you can see the spacing issue):

Styling Pagination, extra width?!? - El Forum - 03-10-2010

[eluser]Unknown[/eluser]
Hello Friend..

Glad to know that you have reached a stage where you are not facing the error i am facing. Request you to please help me. My query is written below.

I am facing a problem with paging in codeigniter. I have setup the pagination in my project and able to place the (1,2,3,4 Next and Last) links through (this->pagination->create_links()) function.

These links are working and fetching the required records from db however their appearance remains same. For instance, First link (ie. 1) is selected by default when i open the page and it remains selected if i click 2,3,4,5 or any other link whereas it should change the selected page to current link.

Please help.

Given below is code how i am doing this….

$query_suffix = “make=”.$make.”&model;=”.$model.”&priceFrom;=”.$priceFrom.”&priceTo;=”.$priceTo.”&showBy;=”.$showBy.”&x=”.$_GET[“x”].”&y=”.$_GET[“y”].”&counter;=”;

$this->load->library(‘pagination’);
$config[‘base_url’] = ‘http://testpage.com/search?’.$query_suffix;
$config[‘total_rows’] = $this->db->count_all(‘car’);
$config[‘uri_segment’] = 3;
$config[‘per_page’] = ‘10’;
$config[‘num_links’] = 3;

$this->pagination->initialize($config);

$data[0] = $this->db->get(“car”,$config[‘per_page’],$_GET[“counter”])->result_array();
$data[1] = $this->pagination->create_links();
$page[“pgMain”] = $this->parser->parse(“search”,$data, true, true);

Styling Pagination, extra width?!? - El Forum - 03-10-2010

[eluser]elaniobro[/eluser]
I would read through here:
http://ellislab.com/codeigniter/user-guide/libraries/pagination.html

there is plenty of documentation that should help resolve your issues.

You are gonna want to add:
Code:
$config['cur_tag_open'] = '<b class="myClass">';
$config['cur_tag_close'] = '</b>';

and possibly some of the other $configs and then stylize it using CSS.