[Bug] Blurry Dropdown Menus

Gewaltkolben commented 1 year ago

Version

Free: 1.0.7 | Pro: 1.1.1

Reproduction link

https://demos.creative-tim.com/soft-ui-dashboard-pro/pages/dashboards/default.html

Operating System

Windows

Device

Desktop PC

Browser & Version

Chrome 109.0.5414.120

Steps to reproduce

Go to the Live Preview of Soft UI Dashboard Free or Pro. Click on the Bell icon in the Navbar in the top right corner of the Screen. The Dropdown Menu is displayed blurry. (Same with the Pro Version)

What is expected?

Dropdown Menu should be clear to read

What is actually happening?

Dropdown Menu and its Text appears Blurry

Solution

The Solution are some changes in at the CSS file, you can find the CSS in the Pastebin down below.

I already fixed it for myself. Maybe the code can be helpful for you to fix it for everyone.

Pastebin: https://pastebin.com/raw/iz1PmSk3

Additional comments

This bug appears in the Free and in the Pro Version. Also this bug appears in the Soft UI Design System Free and Pro Version. The Solution Code i added fixes this bug on both producty.

Aditya062003 commented 1 year ago

Could you please assign me to work on this issue? I'm interested in it.

groovemen commented 1 year ago

Hello @Gewaltkolben,

Thank you for using our products, and for letting us know about this issue. To solve this issue you can set the !important property like this:

@media (min-width: 992px) {
  .dropdown.dropdown-hover:hover>.dropdown-menu, .dropdown .dropdown-menu.show {
     opacity: 1 !important;
  }
}

or you can modify it directly in the SCSS file:

go to ./assets/scss/soft-ui-dashboard/_dropdown.scss and set the !important property at line 77 like so: opacity: 1 !important;

I have noted this issue in the list for the next product update. Hope this information helps you. Please let us know if we can help you with anything else.

All the best, Stefan

groovemen commented 1 year ago

Hello @Aditya062003,

Thank you for your interest in working with our products, sure, you can prepare 2 PRs for both gh-pages and main branches. You can only fix this issue for the free version because you don't have access to the premium version. Also, you can check the above solution to fix this issue.

Please let us know if we can help you with other details.

All the best, Stefan

creativetimofficial / soft-ui-dashboard