Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] Blurry Dropdown Menus #46

Open
Gewaltkolben opened this issue Jan 31, 2023 · 3 comments
Open

[Bug] Blurry Dropdown Menus #46

Gewaltkolben opened this issue Jan 31, 2023 · 3 comments

Comments

@Gewaltkolben
Copy link

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
Copy link

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

@groovemen
Copy link
Contributor

groovemen commented May 12, 2023

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
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants