SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)

    Pagination disappears when scrolled overflowed table column is clicked.

    Hi,

    I am still working on this http://64.201.38.109:12399/expressle...s_search_1.php project. This may be difficult for any of you to help as it involves a few steps to reproduce the problem:
    1. Select the 'Search' button with the default filters
    2. In the 'Search Results' area see the one returned result
    3. In the returned result, scroll sideways until you see a field off-screen; say 'Linked To Registrant 1'.
    4. Double click on the 'Linked To Registrant 1' header; you should see the 'Showing 1 to 1 of 1 entries' display field to align partially off screen.
    5. If you double click on a column header further to the right, then the display field moves accordingly
    In firebug you can see the id='search_table_info'. This is the area that draws the Pagination info. This screen shot highlights this area.
    Attachment 58378

    What complicates this, is that DataTables jQuery is what inserts all html/css inside the <table id='search_table'...>, so without going in and editing the DataTables javascript classes to change the behaviour and create different wrapper html - which is something I don't want to do, the hooks that they insert: id= search_table_wrapper, class = dataTables_wrapper, id = search_table, id = search_table_info, id = search_table_paginate are all that I have to work with.

    The css for this entire section starts at line 709 of the style.css file

    I am currently using form.overview_leads: position: relative and then <div id = 'search_table_info' and <div id= 'search_table_paginate' to position absolute.

    The issue seems to be that although position: relative is set on the form the two absolute position divs are not using the form as their coordinate reference point but instead the <div id='search_results' which has overflow-x set.

    Can you suggest a way that I could get this working so that the pagination info always shows no matter if the search results are scrolled or not?

    Hopefully this long post is not too much?!

    Regards,
    Steve
    ictus==""

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Have you tried putting a left position in place rather than auto which will scroll with the content.

    Code:
    #search_table_paginate,
    #search_table_info{left:0}

  3. #3
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Have you tried putting a left position in place rather than auto which will scroll with the content.

    Code:
    #search_table_paginate,
    #search_table_info{left:0}
    You are indeed a 'Master CSS Smith' Paul! This did fix the issue

    I thought that absolute postioned elements derived their starting coordinates from the closest parent set to position: relative element (given at least one element is set to position: relative). How come in this case as the form was NOT set to scroll, just the <div id ='search_results' (inside the form) is set to overlow-x did the #search_table_paginate and #search_table_info divs positioned absolutely to 'search_results' and not the form?

    Thank you for your help!
    Steve
    ictus==""

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ServerStorm View Post
    You are indeed a 'Master CSS Smith' Paul! This did fix the issue

    I thought that absolute postioned elements derived their starting coordinates from the closest parent set to position: relative element (given at least one element is set to position: relative).
    Yes that's correct. Which in your case is the form element

    How come in this case as the form was NOT set to scroll, just the <div id ='search_results' (inside the form) is set to overlow-x did the #search_table_paginate and #search_table_info divs positioned absolutely to 'search_results' and not the form?

    Thank you for your help!
    Steve
    You didn't set a left or right position so the position becomes auto. That is the element will sit in the flow at the point it would have been had it not been removed. So when you scroll the table the absolute element still retains that auto position at the left of the table and thus keeps track with the edge of the table. The table was hidden with overflow but the pagination will ignore the overflow because its parent (the form element ) is outside that overflow content and so the overflow does not apply to it which is why it remains visible but stills scrolls left with the table.

    In IE6 and 7 if the text is set to text-align center and absolute element will sit in the middle of the page where no left and right co-ordinates have been specified. Therefore its always safer to set one of the horizontal co-ordinates although sometimes that's not possible if you want auto alignment. Note that IE6 and 7 will require the position:relative element to have haslayout in order to position an absolute child properly.

  5. #5
    Foozle Reducer ServerStorm's Avatar
    Join Date
    Feb 2005
    Location
    Burlington, Canada
    Posts
    2,699
    Mentioned
    89 Post(s)
    Tagged
    6 Thread(s)
    You didn't set a left or right position so the position becomes auto. That is the element will sit in the flow at the point it would have been had it not been removed. So when you scroll the table the absolute element still retains that auto position at the left of the table and thus keeps track with the edge of the table. The table was hidden with overflow but the pagination will ignore the overflow because its parent (the form element ) is outside that overflow content and so the overflow does not apply to it which is why it remains visible but stills scrolls left with the table.
    Excellent, clear explanation!

    In IE6 and 7 if the text is set to text-align center and absolute element will sit in the middle of the page where no left and right co-ordinates have been specified. Therefore its always safer to set one of the horizontal co-ordinates although sometimes that's not possible if you want auto alignment. Note that IE6 and 7 will require the position:relative element to have haslayout in order to position an absolute child properly.
    The idea safe-gaurding absolute positions by setting a horizontal coordinate is great info.

    Thank you Paul, your patience is remarkable!

    Steve
    ictus==""


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •