I have a responsive Datatable that also has the Show/Hide columns feature enabled.
I've noticed that whenever I hide a column using the show/hide buttons, a new column will automatically appear in order to fill the width of the page.
Is there a way to disable this so that if I toggle a column to hide, another column does not try and fill its place, but the existing columns will just fit the width of the page?
A test case of my current issue can be found here: http://live.datatables.net/huruwaro/1/edit
Thanks for your time!
Try to redraw the table after clicking the button
$('#myTable1').DataTable().clear().draw();
or
$('#myTable1').DataTable().columns.adjust().draw();
or
$('#myTable1').DataTable().columns.adjust().draw(false);
Related
I have a angular directive which allows me to select the content of the table cells. Its working fine as expected.
But When I try to select multiple cells in one go scrollbar is not moving so I am not able to select the cells.
Stackblitz Demo
As you can see in below image I am selecting the cells but scrollbar is not moving to bottom or right. Its Not allowing me to select all the desired cells. (cells with green background are selected cells)
Update: More clarity about the issue
I can select multiple cells. But scrollbar is not moving right or bottom while selecting multiple cells. So not able to select the cells
which are not visible in the view. I am able to select the cells which
are visible in the current view
By using MouseEvent#clientX, Element.clientWidth and Element#scrollLeft or Element#scrollTo you can do the trick. See the StackBlitz
I have a bokeh project that looks very similar to this https://demo.bokeh.org/movies
Now I would like to make it possible to hide/unhide the column on the left.
I know how to hide it following the solution from here https://discourse.bokeh.org/t/hiding-bokeh-elements/4335/2
The problem is now where to put a button which would show the column again.
I thought of the following:
When hiding the column make another button visible which will allow to unhide the column. This is easy but adding a new widget to the layout would defeat the purpose of hiding the column since either way I would have a big button visible on the screen affecting the position of the figure. Is there some way of adding a new button widget which does not affect the whole layout?
Adding a new tool to the figure which would call the unhide the column. I am not sure though if this can be done easily.
BACKGROUND: I have a jQuery datatable on my website that I want to look, act, and feel like a table on desktop sizes. When it hits a small screen size (as definied by Foundation - 39.9375em), I want to hide the header and footer (which I already basically figured out) and have the first column take up the full width of the page and force all the other columns to a child row. The other columns just have buttons/links that take you to other pages having to do with the name of the row. Things like settings, status, etc.
QUESTION: How do I force the column to take up the full width?
WHAT I'VE ALREADY TRIED: I tried setting white-space: nowrap, but then it just responsive hides the whole column and then I'm left with literally just the control thing. So it's like an accordion. I tried to look up how to force the other columns to be hidden responsively, but I couldn't find anything and I can't think of any way to do it myself.
Thanks in advance!
After some playing around, I found a solution on this page of the datatables documentation: https://datatables.net/extensions/responsive/classes. For all of the columns except the title column, I simply put className: 'min-tablet-l'. That way, as soon as we hit landscape tablet size, the columns are automatically thrown into the child row and the control turns up that lets me show/hide it is shown too.
I have a form that has a two column layout. In each column I have a label with the input text element directly under the label.
When I view on mobile, it is responsive, but it just makes the input boxes smaller, and stays on two columns. What I want it to do is to switch to a single column layout. Label, with input element underneath, then next label under that and so on.
I am able to display two different forms based on screen size with media css settings, but then I have two copies of same form. I'm trying to avoid maintaining two separate copies.
Is there a way to accomplish this?
Add some sample HTML of your page, very likely you just need to add the extra div classes such as
<div class="col-md-2 col-sm-12"> </div>
which would display the div as 2 column when on a medium device and a 12 column when on a small display device.
Check the link try resizing the window down and you see the div jump to filling the page instead.
https://codepen.io/anon/pen/aKwoVa
I've got a table and it has rows that are collapsible when clicked on the table heading.
Problem is it doesn't seem to be very smooth, there's a lag and jump once I click on the header and when the content shows. Does anyone know how to fix this?
See example build ยป
Unfortunately, table rows does not animate (with jquery) - see this related question on SO: How to Use slideDown (or show) function on a table row?
Work-around will be to use div based layout or try out wrapping td content into divs and animating those divs - see this fiddle. Of course, you have to adjust the css.