MDB Bootstrap Support


Topic: MDB Bootstrap Support

Michel pro asked 6 years ago

Hi:

I have a component where I need to highlight the subject item with many details, below it a carousel of comparable items in cards with few (the most important features) details of the comparable item. It behaves weirdly in many ways, is breaks responsiveness in sm-down media queries showing all three cards one below the other, it doesn't slide correctly.

Sliding consists of sliding old content out of the view element and sliding the new content into the view in the direction contrary of the arrow clicked. Well, it is only showing new content sliding in but first it clears out current content and therefore it can't slide out.

It also requires two clicks to make the move and about 1 second later it slides again in the same direction by itself.

If I take my mouse cursor out of the window it doesn't slide at all, it clears the content and flashy presents the new one but without animation.

ChangeDetectionStrategy.OnPush causes it. If I remove it or simply configure it to ChangeDetectionStrategy.Default it starts working normally. I am wondering if there is something I can do to overcome this situation since my application is getting big and now is feature-oriented state managed and to put it more real I can dare to say it is 90% state driven so it is not an option to work without OnPush.

To reproduce the issue generate it with:

ng g component Comparables -ve=none --changeDetection=OnPush

Then copy any slider from mdb bootstrap code samples, even testimonials' slider, any, the result will be the same.

Furthermore, I also tried using this component with ChangeDetectionStrategy.Default with an input variable with my array of cards and wrapping it inside a parent component that have ChangeDetectionStrategy.OnPush and it didn't work either.


Damian Gemza staff answered 6 years ago

Dear @Michel 

Thank you for your report. That's quite a strange behavior of carousel with OnPush.

We definitely have to investigate this case.

But unfortunately, I'm not able to provide you some ETA on this fix. Please be patient.

Best Regards,

Damian


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.0.0
  • Device: MacBook Pro
  • Browser: Chrome 70.0.3538.77
  • OS: macOS Mojave v10.14.1
  • Provided sample code: Yes
  • Provided link: No
Tags