Display bug with dataTables in a accordion

Alastor

Hey guys,

First of all, congratulation for this framework, you did such a great job !

I got an issue when using a dataTables in a Jquery Ui accordion.
In fact, my custom length menu display and hide before the rest of the div when I open or collapse my accordion.

This is not blocking but ugly for the users. Do you have a solution please ?
I watched many post but none treat this issue.

The strange think is, this display issue do not trigger when I use my dataTables in a Jquery Ui tabs plugin in an accordion...

Thanks in advance,
Sorry for my english,
Guillaume

Alastor

Ok, found where it come from. Got a position absolute on label atribute.
I did a test page to reproduce the bug :

[code]






$(document).ready(function() {
$("#accordionOperator").accordion({ heightStyle: "content" });
initializeTable('#tasksNatureTable');
initializeTable('#tasksAffectedTable');
initializeTable('#tasksNotAffectedTable');
});

function initializeTable(idTable) {
var oTable = $(idTable).dataTable({
"bFilter": false,
"bDestroy": true,
"bStateSave": true,
"sDom": '<"top"t><"pager"ilp><"clear">',
"iDisplayLength": 5,
"oLanguage" : {
"oPaginate" : { "sPrevious" : 'Prev.', "sNext" : 'Next' },
"sInfo": "_START_ to _END_ on _TOTAL_",
"sLengthMenu": '51020'
}
});
return oTable;
}



.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em;
text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; }
.ui-corner-all { -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default
{ border: 1px solid #8f8f8f; background: #e6ecc4 url(images/ui-bg_highlight-
hard_75_e6ecc4_1x100.png) 50% 50% repeat-x; font-weight: normal; color: #454246; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-accordion { width: 100%; }
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; padding-left: 2.2em; }
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content { padding: 0.3em 0.3em; border-top: 0; margin-top: -2px; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
.ui-accordion .ui-accordion-content-active { display: block; }

.paginate_enabled_previous, .paginate_enabled_next { cursor: pointer; }
.paginate_enabled_previous, .paginate_disabled_previous { padding-left: 10px; }
.paginate_enabled_next, .paginate_disabled_next { margin-left: 5px; padding-right: 10px; }
.dataTables_info { float:left; text-align: left; }
.dataTables_paginate { text-align: right; float:right; }
.dataTables_length { padding-left: 15px; text-align: left; float:right; padding-right: 150px; }

.header{margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;
li ul, li ol {margin:0;}
ul, ol {margin:0 1.5em 1.5em 0;padding-left:1.5em;}
ul {list-style-type:disc;}
}
table {margin-bottom:0.1em;width:300px;border-collapse:collapse;}
th {font-weight:bold;}
thead th {background:#B7D510;} /* c3d9ff */
th, td, caption {padding:4px;}
tbody tr.even td {background:#e5ecf9;}
.top {margin-top:0;padding-top:0;}
.bottom {margin-bottom:0;padding-bottom:0;}
.pager{
text-align:center;
margin-top:10px;
font-weight: normal;
}
.pager input[type=text].pagedisplay{
width:40px;
text-align:center;
}
.pager img.prev, img.next{
cursor:pointer;
}
.pager select.pagesize{
margin-left:5px;
}

.pager a {
color: #98AE20
}
label { position: absolute; }





Agenda 1





Prev.



Next.







Titre 1
Titre 2
Titre 3




Toto
Tata
Tutu


Toto
Tata
Tutu


Toto
Tata
Tutu


Toto
Tata
Tutu


Toto
Tata
Tutu


Toto
Tata
Tutu






Agenda 2





Opt1
Opt2
Opt3







Titre 1
Titre 2
Titre 3




Val 1
Val 2
Val 3


Val 1
Val 2
Val 3


Val 1
Val 2
Val 3


Val 1
Val 2
Val 3


Val 1
Val 2
Val 3


Val 1
Val 2
Val 3






Liens




Lien 1

Lien 2

Lien 3







[/code]

Try no navigate on the accordion to see the select appear.
Best regards