DataTables with Bootstrap. Bootstrap Action dropdowns are trapped inside Datatables container
DataTables with Bootstrap. Bootstrap Action dropdowns are trapped inside Datatables container
mlyon
Posts: 2Questions: 0Answers: 0
I am using Bootstrap with a grid that contains an Action element on the right hand side. The Action element is a bootstrap dropdown with a sub menu that contains Edit, Details, Delete (when security allows) as well as custom actions for the current tables context.
After receiving a few feature requests that were right up DataTables alley, I decided to switch over to utilizing DataTables for the grid rendering and all works great except that when the Action dropdown is activated, its content is "trapped" in the DataTables containing div. The dropdown expands down and right which correctly causes the grids scroll bars to become active, and if you scroll all the way down/right you can see the entire bootstrap dropdown.
I cannot make the JS fiddle work with both bootstrap and DataTables it doesn't seem to read all the CSS, so the page does not look like it should, and thus the issue never occurs on the JSFiddle page.
I have screenshots of it happening,
DataTables rendered table: http://imageshack.us/photo/my-images/69/tjpc.png
Top row Action Clicked: http://imageshack.us/photo/my-images/5/fbo6.png
Bottom row Action clicked: http://imageshack.us/photo/my-images/707/ds65.png/
I have considered moving the Action to the first column which will take care of the right expansion of the dropdown, but will still be left with the downward expansion.
Thanks in advance for any help given.
Regards,
Marc
After receiving a few feature requests that were right up DataTables alley, I decided to switch over to utilizing DataTables for the grid rendering and all works great except that when the Action dropdown is activated, its content is "trapped" in the DataTables containing div. The dropdown expands down and right which correctly causes the grids scroll bars to become active, and if you scroll all the way down/right you can see the entire bootstrap dropdown.
I cannot make the JS fiddle work with both bootstrap and DataTables it doesn't seem to read all the CSS, so the page does not look like it should, and thus the issue never occurs on the JSFiddle page.
I have screenshots of it happening,
DataTables rendered table: http://imageshack.us/photo/my-images/69/tjpc.png
Top row Action Clicked: http://imageshack.us/photo/my-images/5/fbo6.png
Bottom row Action clicked: http://imageshack.us/photo/my-images/707/ds65.png/
I have considered moving the Action to the first column which will take care of the right expansion of the dropdown, but will still be left with the downward expansion.
Thanks in advance for any help given.
Regards,
Marc
This discussion has been closed.
Replies
We may require scrolling later, so utilizing the aoColumnDefs will probably come into play, sooner rather than later. Right now we utilize only one generic code block to generate all the tables. We will probably have to add a variable definition of the column arrays and set them into the view to be consumed by the generic code...
Not much of a "solution", but this may help other DataTable/Bootstrap users.