Stepper form - animations problem


Topic: Stepper form - animations problem

Darryl asked 3 years ago

Expected behavior

stepper works correctly - https://mdbootstrap.com/docs/standard/components/stepper/

Actual behavior

if using windows via remote desktop, or with animations set to false, the content inside each stepper div will overlap each other on change.

is there a fall-back option to disable animations, or at least something I can implement to not use stepper if the user doesn't have animations enabled?


Darryl commented 3 years ago

the vertical stepper actually works -- does anyone know how you can check if win animations are turned off via js? that way you could just default to the vertical option


Michał Duszak staff commented 3 years ago

This might be connected to Reduced motion option in your OS. You can try turning it off:In Windows 10: Settings > Ease of Access > Display > Show animations. In macOS: System Preferences > Accessibility > Display > Reduce motion https://web.dev/prefers-reduced-motion/


Darryl commented 3 years ago

It is related. But that obviously isn't a fix for the problem, as I can't control if users have that option selected or not. Or if they are accessing my application via remote desktop.


Michał Duszak staff commented 3 years ago

Thank you for your feedback. We will look at this case and provide solution ASAP.


Michał Duszak staff commented 3 years ago

https://mdbootstrap.com/snippets/standard/m-duszak/3424965#css-tab-view

See if this workaround works for you


Darryl commented 3 years ago

That helps, but if there are inputs in the display none areas, the labels of those input fields are rendered with lines through them. Similar to this issue -- https://mdbootstrap.com/support/jquery/input-label-has-line-through-when-form-switched-from-display-none-and-foucs-on-input/


Michał Duszak staff commented 3 years ago

Updating input fields might help https://mdbootstrap.com/docs/standard/forms/input-fields/#section-update Could you provide me a snippet to recreate this issue so that I can take a closer look at your exact example?


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Open

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: all
  • Browser: all
  • OS: Win
  • Provided sample code: No
  • Provided link: Yes
Tags