I am using Material UI DataGrid component in my project.
(components info : https://material-ui.com/api/data-grid/data-grid/)
But, I can't move the vertical scroll to selected row position like this.
const windows = document.getElementsByClassName('MuiDataGrid-window')[0];
windows[0].scrollTop = 10; // 10 is for test.
I find that the div tag which has class name called 'MuiDataGrid-window' has vertical scrollbar.
So. I tried that.. It doesn't work.
Does anyone know about this info?
Related
I am trying to add this scroll- https://www.npmjs.com/package/react-custom-scrollbars-2
to the Material UI autocomplete list of options.
My application is using the same scroll component everywhere and the UI looks really off with the traditional default scroll that we have on mui autocomplete.
Link to component-
https://codesandbox.io/s/eioiuz?file=/demo.tsx
Here's how it looks right now- https://i.stack.imgur.com/Uwvif.png
Here's how I want the scrollbar to look like- https://i.stack.imgur.com/AM367.png
A possible way to solve this problem is by styling the default tag used by MUI Autocomplete list component box. For Example ul::-webkit-scrollbar { width: 4px; } will reduce the size of the scrollbar.
I have a vertical slideshow that scrolls/sticks to the next panel when the user scrolls. Desired effect is https://www.tesla.com but I thought I could achieve this with CSS (example below).
Example 1: https://codepen.io/moy/pen/poNrVdO
The problem is I would like to add a class so I can fade in the text when the next panel becomes 'active' and I'm not sure what the best approach is. Due to the framework this is going into, a non-jQuery solution would be preferable. I tried using http://dbrekalo.github.io/whenInViewport/ but can't get that to play ball at the minute.
import * as whenInViewport from "https://cdn.skypack.dev/when-in-viewport#2.0.4";
var WhenInViewport = window.WhenInViewport;
var elements = Array.prototype.slice.call(
document.getElementsByClassName("slideshow__panel")
);
elements.forEach(function (element) {
new WhenInViewport(element, function (elementInViewport) {
elementInViewport.classList.add("inViewport");
});
});
Update
The JS I was trying to use would only add a class and not toggle (add/remove) when items entered/left the viewport. So I decided to try a few other options. I've used AOS (Animation On Scroll) before but this is also having problems...
Example 2: https://codepen.io/moy/pen/XWNavaO
I think this is done to the overflow-y: auto which is required to get the snap-scroll to work. Can anyone offer an advise on this or would I be better moving away from snap scroll - as it's more hassle than it's worth?
I'm using Gatsby and i made a vertical side navigation menu. I used useRef for navigation wrapper and for every item inside menu for getting some height values. Then I calculated the scroll position for active navigation link as you can see below and set scrollTop value for navigation wrapper and i can align scroll bar to active link item.
function calculateScrollPosition(wrapper, link) {
const distance = wrapper.current.scrollHeight - wrapper.current.offsetHeight
const scrollUnit = wrapper.current.scrollHeight / distance
const itemOffset =
wrapper.current.scrollHeight / 2 < link.current.offsetTop
? link.current.offsetTop + link.current.clientHeight
: link.current.offsetTop - link.current.clientHeight
const position = Math.floor(itemOffset / scrollUnit)
wrapper.current.scrollTop = position
}
and i am calling it here
useEffect(() => {
if (activeLink) {
calculateScrollPosition(list, activeLink)
}
}, [activeLink])
But each time I click the link inside sidebar and change the page, scrollbar of navigation jumping to top for a second and then finding the right place. I expect it to go to new position from last position, not jumping to top. Any help i will appreciated.
Thank you for your comments. I actually fixed my problem so i want to explain how i did.
As i mentioned, I'm using Gatsby and i have multi-lang website. Pages creating dynamically with .md files. Gatsby re-renders when the top level component changes between pages. Actually that was broke my sidebar transitions too because it was unmount and mount layout again when i change page.
Gatsby doesn't automatically wrap pages in a layout component. So I wrapped pages with layout using gatsby-plugin-layout. I made 2 different layout. One of it main layout with sidebar and header, other one for my dynamically created pages. I can use one of inside another. Now its not re-render my main layout, it is just re-render layout which i created for pages inside main layout, scrollbar not jumping to top and transitions are works fine.
I don't know if i explained well. I hope it helps others who have the same problem.
I'm trying to get widgets in a grid to get removed when a widget is dragged into a separate Div, but I can't seem to get it working using 'removable' in the grid's options.
I've been through the docs (https://github.com/gridstack/gridstack.js/tree/develop/doc) and tried different options that are on there as well as tried to replicate one of the demos that has the functionality working (http://gridstackjs.com/demo/two.html) I've looked for other people who've had these issues too but can't find any posts that were able to help with this problem.
The First Div is where I want to drag the widgets to, and the second is where I'll be dragging them from.
<div class = 'trash ui-droppable'>
<h1 class = 'text-center pt-4'><?= FontAwesome::light('trash'); ?>
</h1>
</div>
<div class = 'grid-stack mt-3 ui-droppable'>
<!-- Widgets set here -->
</div>
Here's the JQuery which sets the grid's options, the option that I think should be allowing widgets to be dropped into is removeable and set it to the first Div's class name of ".trash".
var options = {
cellHeight: 100,
verticalMargin: 10,
removable: '.trash'
};
$('.grid-stack').gridstack(options);
What should be happening is I drag a widget over to the top Div, and the widget should be removed from the grid entirely but instead when dragged out and released acts like it's been dragged out the grid and places it back to where it was.
I had the same problem, which was fixed by giving the trash div a minimum height (like 75px).
I want to set scroll' location to bottom in KendoGrid after setting data in DB.
I've tried it like this. but It doesn't work. How can I set focus at Grid' bottom?
var grid = $('#divBillGrid').data('kendoGrid');
var content = $(".k-grid-content");
content.scrollTop(grid.tbody.height());
You will need to specify the scrolling in dataBound event of the grid
dataBound:function(){
this.content.scrollTop(this.tbody.height())
}
Please have a look at the example below
http://jsbin.com/cacokavonu/edit?html,js,output