css issue while using multi select and scroll feature in datatables

beebek

I am using datatable's multi select feature and scrollX and scrollY with various other features as well. But the features particularly multiselect and sScrollX, sScrollY seems to conflict eachother.

------------------------------------------
multiselect only
http://postimg.org/image/z55uqsbxd/

While using multifilter with scroll feature, the width of multiselect textbox seem to shift right. With more than 40 columns, the UI gets worse.
------------------------------------------
multiselect with scrollY
http://postimg.org/image/palnmlfnb/
------------------------------------------


I dig into the rendered html with firebug and found that,
1. In multiselect only, there are no styles for width






2. But after using scroll X and Y feature i.e. ( sScrollX, sScrollY), styles appears





And the culprit here seems to be the style="width: XXpx;" which is being rendred by the javascript, for each 'th'

element.style {
width: XXpx;
}

Note: XX above refers to two digit number, e.g 14

I even tried to use css feature overflow:auto; for the entire table which works perfectly but now the scroll bar is for the entire table. But I also have another features like tableTools and Colvis feature at the top which comes under vertical scroll bar as well. So this was not a solution.

Please shed some light on this issue.

allan

Can you please link to a test case showing the issue? Have you got width:100% on the select lists or something like that?

With scrolling enabled DataTables has to set a width on the columns, otherwise the header, footer and body wouldn't align.

Allan

beebek

Hi Allan,
Please have a look, I've used sScrollY:300 for this demo
http://jsfiddle.net/eSkzy/4/