Double scrolling with additional Grids

[jygoh1]

When I add additional Grid containers for extra components e.g. tables/videos, I sometimes get a double scrollbar upon loading. Is this a container overflow issue, and if so where can I fix it? When I use fewer components, it doesn't overflow, but not sure where the constraint is, if any.

[einazare]

Hello @jygoh1 ,

Thank you for your interest in using our product.
Could you please give me some exact steps on reproducing this behavior?

Best,
Manu

[jygoh1]

Hi, in views\Dashboard\Dashboard.jsx which renders the main home dashboard page, it renders 3 separate elements. In the middle which contains (and within it) elements, which further contains , and elements, I replaced the content of the with a

containing a video. Specifically, it looks like this:

      <GridItem xs={12} sm={12} md={6}>
        <Card>
			<div>
				<Player
				  aspectRatio="16:9"
				  autoPlay={false}
				  // poster="/assets/poster.png"
				  src="http://media.w3.org/2010/05/bunny/movie.mp4"
				  BigPlayButton position="center"
				>	
				  <ControlBar autoHide={false}>
					<ReplayControl seconds={10} order={2.1} />
					<ForwardControl seconds={10} order={3.1} />
					<PlaybackRateMenuButton
					  rates={[5, 2, 1.5, 1, 0.5, 0.25]}
					  order={7.1}
					/>
				  </ControlBar>
				</Player>
			</div>
        </Card>
      </GridItem>

where the following video components are obtained from:

// video-react - https://video-react.js.org/components/player/
import { Player, ControlBar, ReplayControl, ForwardControl, PlaybackRateMenuButton } from 'video-react';

I'm getting something like this regarding the double scrollbar:

[einazare]

Hello again @jygoh1 ,

So to make sure i've understood correctly.
You have double scroll on that page only if you insert the video?
Could you please verify if you have double scroll on all pages?
And another thing that i would like to know, is if you are using Windows.

Best,
Manu

[jygoh1]

Hi @einazare , I get double scroll even without the video if I copy-paste the last row with the tables. Yes, am using Windows. I have just noticed also that even with the original setup, I get double scrolling as well (meaning 3 rows). I am using Google Chrome to view this as I most likely am looking to show it on Chrome, if that matters! thank you

[einazare]

Hello again @jygoh1 ,

I think i've found what the problem is.
Could you please try the following? :
Go in src/layouts/Dashboard/Dashboard.jsx and after line 43 (if (navigator.platform.indexOf("Win") > -1) {) add this code: console.log(this.refs.mainPanel.style.overflow = "hidden");.

I am really sorry about this, right now i am on a small vacation and do not have access to a Windows computer to make the tests above myself to make sure that is the right fix.

Best,
Manu

[jygoh1]

hi, many apologies for the late reply! with that code, in the console i see "hidden", what should i be seeing?

[einazare]

Hello again @jygoh1 ,

Sorry about that, i didn't want to send you the thing with the console.log.
My mistake.
It should have been only this.refs.mainPanel.style.overflow = "hidden".
Anyhow, did that fix the problem?

Best,
Manu

[jygoh1]

hi, i'm afraid not! from what i can tell, it looks the same before and after. would you have a possible different approach?

[einazare]

Hello again @jygoh1 ,

Right now i do not since i am on a small vacation.
I'll be back on Monday with a fix.

Best,
Manu

[jygoh1]

thank you!

[einazare]

Hello again @jygoh1 ,

To stop the double scrolling appear go in src/assets/css/material-dashboard-react.css and at the end of the file, please add:

body{
  overflow: hidden;
}

We are going to add this bit of css in our product as well on our next update.
Sorry for this issue.

Best,
Manu

[jygoh1]

worked like a charm, thank you so much! and thanks for the future update as well!