I created a draggable drag and drop table with draggable rows.
For the need of my project, i added multiple drop targets with multiple Droppable elements like in this example:
https://codesandbox.io/s/ql08j35j3q
It work pretty fine, but there is one problem, the scroll speed.
When i'm trying to drop an item in an element at the bottom of the page, it gets very slow.
This GIF will show the problem.
Do you have any clue for a solution ?
This may be a result of react-beautiful-dnd autoscroll, interfering with a css property called scroll-behavior. I just spent a day de-bugging this myself.
If you are using bootstrap, by default, bootstrap sets {scroll-behavior: smooth} to the entire html tag. To apply react-beautiful-dnd's fast auto-scroll, this css property should be {scroll-behavior: unset !important}
If you are not using bootstrap, or another library, check your css stylesheets, and see if {scroll-behavior: smooth} is set anywhere in any parent containers to your Droppables, and unset them.
A good way to debug this is by also opening Inspect Element in your browser, and looking at the styles applied to the html, body, or parent containers to your Droppables.
It appears that when scroll-behavior is defined in css or javascript( if you use window.scrollBy()), it may interfere with react-beautiful-dnd's fast auto-scroll feature, and make it slow.
Let me know if this works for you :) !
Here is my example in a gif - All the containers in the column are droppables
Related
I have a working vertical column drag and drop React app using react-beautiful-dnd, but would like to 'invert' it so that Draggable items fall to the bottom of the Droppable div instead of floating to the top. Is this possible?
If I'm understanding you correctly, you'd like to have a list where when the container is not full, the items within that list are aligned to the bottom of the container?
If so, then yes - I would utilize flexbox.
Here is a good resource for flex - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
There are multiple different ways to implement this with flex. Pick your poison.
edit
Based on the code sandbox:
I would add a wrapper div to the bay component with the same height as what you have now. On the child div, add a dynamic height field that is dependent on how many tables the bay contains.
Users won't be able to drop into the entire column but you could style it to show the user where they need to drop when the column is empty.
I ended up just creating another invisible strip with flexGrow = 1 to push everything to the bottom.
I've built out a react data grid. I've added the sortable optional feature and on my system is working with the sort icon(s) rendering to the right of the header text, which is how I'd prefer it.
Others in my group have pulled my code when they run it the sort icon is rendered to the left of the header text (I'm assuming somehow inserting the pull-left style to the icon span).
I can find no information that outlines how exactly this can be controlled, or why it would work differently from one system another.
Hopefully someone is still using this component that can shed some light on this.
You should be able to target the icon and override with CSS. If you inspect the element in Dev tools, it will tell you the classname of the icon. Use CSS to move its position.
In bootstrap uib-collapse class animation behaviour hapeens only for vertical div.
But I need same animation/motion behaviour for table columns to show or hide upon click on icon.
For rightnow using ng-show and ng-hide but that doesnt seems animation behaviour not look good.
How can I achieve same behaviour for table colum wise NOT row
uib-collapse has a horizontal option and all you have to do is to add an additional attribute called 'horizontal' for the panel div as follows.
<div uib-collapse="isCollapsed" horizontal></div>
There is an issue recalling this problem and there is a workaround for it but as it's mentioned it's not recommended to use that.
Doing some further investigation, this appears to be a longstanding pre-existing issue with animating tr elements - my recommendation is to not do it. It seems that even when using vanilla Bootstrap JS, one has to hack around it too.
Here is a workaround that works - I am going to close this issue as not a fixable bug unfortunately. Thankfully, one can work around this, as my Plunker shows.
I can't figure out how to remove the scroll bar from my website.
I've looked up ways of doing it on SO but with no luck. It just keeps staying in the box.
I also want to be scrollable but just without the actual scroll bar visible from computers.
(It's not visible via mobile devices which is okay)
Regards,
Alex
There is no standard cross-browser CSS code you can use to render scroll bars invisible. However, you can put your <div id="shoutbox_data"> element inside another <div> element with an id field like "shoutbox_wrapper", set the CSS overflow property of the wrapper element to hidden, and then use JavaScript to automatically resize the wrapper element so it covers up the scrollbox. The idea comes from Jan Bilek, and you can find the JavaScript to accomplish this on his blog.
I've wasted too much time on this and am begging, begging, I tell you, the stackoverflow community for help!
I'm a new jqGrid user, and have my grid working as I want it to, but at the moment, cannot get a row to highlight in IE 7 as the mouse is hovered over it. Our shop is currently running IE7, so changing browsers/versions is not a possibility. Hover works great in Firefox, does not work in IE7.
I have googled endlessly for "jqgrid ie7 hover", "jquery ie7 hover", and any iteration of "ie7" and "hover", and "css" and all that.
I have tried so many variations of DOCTYPE declarations it ain't funny. I've tried reverse engineering the http://www.trirand.com/blog/jqgrid/jqgrid.html demo pages until my fingers are aching. Yes, the hover works on the demo pages. No it ain't working on my own page. I have tried manually passing in the ui hover CSS classes directly with different attributes and the !important flag just to see if I get anything. Nothing.
Now here is what does happen when I hover over a jqGrid row with IE7: The bottom and right borders of the table cells will change color, but the background color does not. So, I know the hover highlighting is working for the cell borders, but not for the cells or row itself.
As a diagnostic aid, I slapped in a javascript alert() to bang when I hovered over the table. It works at the table level, but does not ever fire if I set it to fire if I hover over a row or cell. I used the IE Developer Toolbar DOM parser to verify I'm calling it right. I'm wondering if jqGrid takes over that functionality, though.
Anyhow, folks, the short version is: Why can't I get row highlighting to work in IE7?
Help me Obi Wan Kenobi, you're my only hope!
I'll answer my own question. The problem was a conflict with a separate .css file. My page uses the 960 Grid System for layout control. One of the items used as part of the grid system is a "reset.css" which was conflicting with the jqGrid hover display in my app. I commented out the call to reset.css and the problem went away. Fwiw, I did not see any other adverse affects to the grid system by leaving out reset.css.