[LIST=1]
[]Select the ‘Search’ button with the default filters
[]In the ‘Search Results’ area see the one returned result
[]In the returned result, scroll sideways until you see a field off-screen; say ‘Linked To Registrant 1’.
[]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.
[*]If you double click on a column header further to the right, then the display field moves accordingly
[/LIST] 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.
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?
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?
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.
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.
