[Bug] Sidebar on RTL Layout creates horizontal scroll and animates jumpy

invm commented 4 years ago

Version

1.1

Reproduction link

https://demos.creative-tim.com/black-dashboard-pro-react/#/rtl/rtl-support

Operating System

Windows & Ubuntu

Device

Desktop & Mobile

Browser & Version

Google Chrome 81.0

Steps to reproduce

Go to RTL support page
Lower screen width to 900px
Toggle sidebar open and close.
What is expected?

Smooth transition and no horizontal scroll to the right.

What is actually happening?

The transition is super jumpy and sometime the siderbar is shown and sometimes is goes back and does not show at all. Also when the sidebar is shown, a horizontal scroll appears to the right.

Solution

I've noticed that the regular version of this product, which also has rtl support, does not have that issue, maybe it can help. Waiting to hear from you.

Thanks!

Additional comments

einazare commented 4 years ago

Hello there, @invm ,

Thank you for your interest in working with our products, and sorry about this issue. Please go inside src/assets/scss/black-dashboard-pro-react/custom/_rtl.scss And delete the following lines:

.nav-open {
    .rtl .wrapper {
      @include transform-translate-x(-260px);
      @include transitions (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));

    }
  }

Also, by checking this issue, I've seen that the Sidebar is not full height, to solve this, please go inside src/assets/scss/black-dashboard-pro-react/react/_sidebar-and-main-panel.scss and after line 15 add the following:

  .perfect-scrollbar-on {
    .sidebar {
      height: 100%;
    }
  }

Best, Manu

einazare commented 4 years ago

We will leave the issue opened, for others to see the solution until we will make another update to the product and add these to it.

creativetimofficial / ct-black-dashboard-pro-react