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
Related
I have an Ant Design table where columns are resizable using react-resizable and drag-able using react-drag-listview.
All of the features are working nicely although there is a bug that exhibits itself under certain circumstances which means that the entire solution to having those features working together might not be viable or ready for production.
Here is the correct behaviour - when clicking on a table header cell the entire cell is dragged and you can see the box-shadow around its borders like this:
The bug is that sometimes after resizing a column and then clicking the header cell of the column to the right, the header cell is not dragged, only the the content (text in this case) / column title is, which looks like this:
Here is a code sandbox and a step by step guide on how to recreate the bug:
Go to the code sandbox
Click on the right hand border of any column
Drag and resize that column to the right / bigger until the mouse is over the title of the column to the right of it like this:
As soon as you have done this lift the mouse button up and press it down on the title of the column you are hovering over i.e. (click on the title of that column to the right)
Drag the column
Sometime the behaviour is intermittent but it is easily reproducible and may be more visible if the steps are repeated quickly.
How can this bug be solved?
Issue occurs because header text is selectable and dragable by default. Add following style for dragHandle class and th elements. You will not be able to select text in the header but on the bright side issue will be resolved.
thead tr th,.dragHandler {
user-select: none;
}
Take a look at the updated example.
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);
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 am using Sortable Grid from here to perform a drag and drop in my app. However, I want to dynamically create a Row while dropping.
I mean say if there are two rows in Sortable Grid. If user drags an element and thinks of creating the third row before dropping it, then he/she should be able to do it by dropping below the second row. How do I do it?
Use a div below the boxes, and use ondragenter to prepare the program for a new row. I don't know how the plugin works, but this should help. Make the div however high you want, and that will be the distance beneath the list that can be selected (I recommend the height of the grid boxes)
I'm trying to use jQueryUI to build a drag and drop interface that allows both horizontal and vertical drag/drop.
I create horizontal drop zones above, between and below any existing rows. I allow vertical drag and drop of elements with jQueryUI Sortable. And I can drag and drop existing elements to either a new row or to an existing row.
I set up this jsfiddle with what I have so far: http://jsfiddle.net/travisrussi/DzS8d/2/
These are the issues I have:
Dropping a second element on a new row in the contentPane causes the element to visually revert even though it drops successfully and the draggable object has 'revert' set to 'invalid'.
Replication steps (using the jsfiddle)
Drag Option 1 to the contentPane.
Drag Option 2 to the top droppable row (above where Option 1 is).
Expected Behavior
Once Option 2 has been dropped, it should not visually revert back to it's original position.
Dragging an existing element in the contentPane causes it to jump to the top left corner of the screen.
Replication Steps
Drag Option 1 to the contentPane.
Mousedown on Option 1 in the contentPane.
Expected Behavior
Mousedown on Option 1 should position the helper element relative to the mouse cursor.
I isolated this issue here: Connecting a Draggable to Sortable causes helper element to jump
Dropping a new element in an existing row with an existing element in the contentPane causes the new element to duplicate with one new element in the existing row and one new element in a new row above the existing row.
Replication Steps
Drag Option 1 to the contentPane.
Drag Option 2 to the same row as the first step.
Expected Behavior
Option 2 should be added to the existing row only.
Any ideas on any of these issues?
I basically rebuilt the interface and got it to work properly.
Here's a link to the working demo that allows both vertical and horizontal drag and drop: http://jsfiddle.net/travisrussi/EGNWU/
In this demo, I don't try to show/hide the horiztonal drop zones (they just stay visible).