mdb-carousel scrolling down

Topic: mdb-carousel scrolling down

Adrian Dragomir free asked 5 years ago

I have a 100vh height mdb-carousel slider in my header on mobile (Android/Chrome) but can't swipe to scroll down the page. Side swipe to trigger slide transitions works fine but no page scrolling is happening on upward or downward swipe. Using version mdb-angular-free-8.6.0.

Any help appreciated! Thanks!

Bartosz Termena staff commented 5 years ago

Hi!

Could you show me your code?

Best Regards, Bartosz.

Adrian Dragomir free commented 5 years ago

Yes, of course.

app.component.html A carousel with controls and indicators from https://mdbootstrap.com/docs/angular/advanced/carousel/

Plus some text:

      <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>

      <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>

Yes, of course.

app.component.html
A carousel with controls and indicators from <a href="https://mdbootstrap.com/docs/angular/advanced/carousel/" target="_blank">https://mdbootstrap.com/docs/angular/advanced/carousel/</a>

Plus some text:

<pre class="prettyprint"><code> 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
</code></pre>

Please insert min. 15 characters.

Adrian Dragomir free commented 5 years ago

app.component.scss .carousel { height: 100vh;}

.carousel .carousel-inner { height: 100vh;}

.carousel .carousel-inner .carousel-item,.carousel .carousel-inner .active { height: 100vh;

}

Add comment

Bartosz Termena staff answered 5 years ago

0 0 Best answer

Hi!

Try to add to your styles this line:

.carousel .carousel-inner {
  height: 100vh;
  overflow-y: scroll; <------
}

Hope it helps!

Best Regards, Bartosz.

Adrian Dragomir free commented 5 years ago

Thank you very much, it is working. But on the desktop browser it appeared a second scroll bar so I modified the setting to overflow-y: auto; and now it is working on both, desktop and mobile. Thank you again. Adrian

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: 8.6.0
Device: any
Browser: Chrome
OS: Android
Provided sample code: No
Provided link: No

Adrian Dragomir

70Support score
5Questions 4Answers 1Snippets