css issue while using multi select and scroll feature in datatables
css issue while using multi select and scroll feature in datatables
beebek
Posts: 20Questions: 1Answers: 0
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.
------------------------------------------
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.
This discussion has been closed.
Replies
With scrolling enabled DataTables has to set a width on the columns, otherwise the header, footer and body wouldn't align.
Allan
Please have a look, I've used sScrollY:300 for this demo
http://jsfiddle.net/eSkzy/4/