What you can do to stop this behaviour in DataTables is set the autoWidth parameter to false. Responsive design is all about adjusting designs to accommodate screens of different sizes. If no breakpoint class is found for a column, Responsive will determine automatically if the column should be shown or not at any particular viewport width. Tables can flex in width, but they can only get so narrow before they start wrapping cells contents uncomfortably or just plain can’t get any narrower.
The reason it does this is to stop the table and the columns (the column widths are also set) jumping around in width when you change pagination. A single row of data needs to be kept together to make any sense in a table. Please note - this property requires the Responsive extension for DataTables. I hot fixed it by adding an arbitrary width to the flexbox (for example width:1px, which gets overridden by the flexbox attributes) and the flexbox shrank accordingly, which let the datatable recalculate its available space accordingly.What is happening is that DataTables is setting the CSS width of the table when it is initialised to a calculated value - that value is in pixels, hence why it won't resize with your dragging. Recalculate the widths used by responsive after a change in the display. 1200px) and table wrapper recalculates its available space to 1200px, but as I decreased the window size, the flexbox kept its larger width (to wrap the table wrapper) and therefore it didnt forced the shrink on the datatable. But the flexbox wraps its content and therefore always includes its child elements (the tablewrapper)Īs soon as I increased the window size, the flexbox grew (100% windowsize, i.e.
The ngx-datatable calculates a fixed width based on the available space of the parent element (i.e 100% of flexbox, lets say 1000px wide window) and applies an width attribute to the tablewrapper (width:1000px). Not sure if its relevant, but my problem was the fixed child width of the datatable. I had a similar issue, but in conjunction with flexbox and the datatable scrollbars. What is the motivation / use case for changing the behavior?īrowser: A single row of data needs to be kept together to make any sense in a table. Data tables can be quite wide, and necessarily so. Add the next line at the end of the function: (dt.table ().node ()).removeAttr ('style') That should work. The process is: When you click on a tab which was initially hidden, that click event triggers a recalculation of the required column widths for the table in the tab - and this will cause the appropriate responsive columns to be drawn. 1 Answer Sorted by: 2 I have the same issue, I'm using the jquery DataTables 1.10.7 and the extension Responsive 1.0.6, I solved by adding a line in the '' in the resize function, about line 560. I'll try to get a plunker up but it's entirely possible that there something else causing this that is specific to my app. Data tables don’t do so well with responsive design. 1 Answer Sorted by: 4 You can combine Bootstrap's tab events with the DataTable responsive.recalc () API call. display: none) the browser will not calculate the width of columns (since the non-displayed element has no width). Description If a table is initialised while it is hidden (i.e. It would re-render the width for enlarging and shrinking window. Recalculate the widths used by responsive after a change in the display. When rendering the datatable in a view and not absolutely positioned, the initial width is set and making the window larger triggers a resize, but shrinking it does not. support request => Please do not submit support request here, post on Stackoverflow or Gitter Bug report => search github for a similar issue or PR before submitting By default, DataTable adjusts to the size of the parent container that gives us 2 ways to set the fixed size for it: To set the size of the parent ' div ' container To use the width and height parameters within DataTable constructor.
0 kommentar(er)
