creativetimofficial / soft-ui-dashboard

Soft UI Dashboard - Free and OpenSource Bootstrap 5 Dashboard
https://www.creative-tim.com/product/soft-ui-dashboard
MIT License
528 stars 1.1k forks source link

[Bug] Modal's Close Button is not visible in Modal's Header #13

Closed nexadomain closed 3 years ago

nexadomain commented 3 years ago

Version

1.0.2

Reproduction link

https://www.creative-tim.com/learning-lab/bootstrap/modal/soft-ui-dashboard

Operating System

Window 10

Device

Desktop

Browser & Version

90.0.4430.212

Steps to reproduce

In the Documentation (Modal Page) of Soft UI Dashboard. Check demo of any Modal. Hover over Modal Header's Close Button area.

What is expected?

Modal Header should show close button. HTML Code for close button is already present. Need to fix some bugs in css.

What is actually happening?

In Modal Header, Close button is not visible, but, if you hover over close button area, it is present there. You can also click it, action of close button(i.e. Close Modal Window) will work.


Solution

Additional comments

groovemen commented 3 years ago

Hello @nexadomain,

Thank you for using our products, we will solve this issue in the next product update. Until then, a quick solution would be to set a "text-dark" class for the button. The code will look like this:

<button type="button" class="btn-close text-dark" data-bs-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">×</span>
</button>

and the component like this:

Screenshot 2021-06-28 at 10 50 26

Hope this information helps you. Please let us know if we can help you with anything else.

All the best,