Hover scroll - Sibling elements are shifted when scrollbar appears
Hi,
Please try the below demo with the small screen ( ~ 1200px)
Contact Details > Meetings
https://preview.keenthemes.com/metronic8/demo1/apps/contacts/view-contact.html
Actually, I tried it on my laptop with window.innerWidth = 1536px then I hovered on the dates which has class hover-scroll-x , the scrollbar appeared and shifted down the under elements. On the opposite, when I moved out my mouse, the scrollbar disappeared and shifted up the under elements which jerks the screen and is uncomfortable.
However, if I resize the screen < 992px, it works perfectly.
Why do we separate 2 scrolling styles?
Could we use the style working with the small screen for both cases?
Thanks
Replies (4)
Hi,
If FireFox is the reason we separate the styles, I want to review the hover scroll as below
- Firefox
+ Desktop screen: work as basic scroll instead of hover scroll => It is still good
+ Mobile screen: Perfectly as expected
- Chrome/Edge
+ Desktop screen: jerky, uncomfortable
+ Mobile screen: Perfectly as expected
Finally, the issue happens on only Chrome/Edge - Desktop screen. Could you take a look and have some improvements?
Thanks
Hi WilinkNet,
Thank you for bringing this issue to our attention. We apologize for any inconvenience it may have caused. We understand that the shifting of sibling elements when the scrollbar appears on the Contact Details > Meetings page can be disruptive.
We are constantly working on improving the user experience and addressing any compatibility issues. We will investigate this specific case with Chrome/Edge on desktop screens to identify any potential improvements.
In the meantime, we appreciate your feedback and encourage you to keep an eye out for future updates and releases. If you have any further questions or concerns, please don't hesitate to reach out.
Thank you for your understanding.
Best regards
Hi,
We are aware of this issue and we will provide a better solution in a future update.
In the meantime you can fix it by replacing hover-scroll-x with scroll-x pb-2. The hover scroll feature is not well supported by Firefox and it seems the current workaround requires some improvements.
Also, you can add my-6 class to the timeline item element to fix the spacing:
<!--begin::Time-->
<div class="d-flex flex-stack position-relative my-6">
...
</div>
<!--end::Time-->Regards.
The all-new CISA Practice Exam [2023] – your ultimate tool for success in the ever-evolving world of cybersecurity and information systems auditing. Stay ahead of the curve with our updated content, meticulously crafted to reflect the latest industry standards and trends. Our comprehensive practice questions and simulations will sharpen your skills and boost your confidence, ensuring you're well-prepared to ace the https://www.dumpstool.com/CISA-exam.html exam. Don't miss this opportunity to elevate your career in information systems auditing. Get ready to conquer the CISA exam with our cutting-edge practice materials. Your success begins here, in 2023, with the updated CISA Practice Exam.
