sandor farkas priority asked 1 year ago


Expected behavior

Avoid ugly borders.

Actual behavior

Ugly Borders. I use icons in combination with buttons on many places of my application. In safari I've ugly borders, see screenshot but I don't see why. Interestingly the borders don't exist on safari here: https://mdbootstrap.com/docs/b5/react/components/buttons/

Resources (screenshots, code snippets etc.)

The snippet editor does not seem to display Icons at all.But here you find code example on how I use icons usually: https://mdbootstrap.com/snippets/react/sandorfarkas/3176492

enter image description here


Krzysztof Wilk staff answered 1 year ago


Hi!

I see the problem. The issue occurs when these buttons have type="button" property. There is a problem on our side (we did not find it before, because as you can see - the problem only exists in the Safari browser) and it will be fixed in the next release :)

For now - you can make a workaround removing this prop in JavaScript, in example:

useEffect(() => {
   const btns = document.querySelectorAll('a.btn');
   btns.forEach((el) => {
      el.removeAttribute('type');
   })
}, []);

I'm sorry for that inconvenience.

Keep coding!



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 1.0.0-beta6
  • Device: macMini
  • Browser: safari
  • OS: macOs
  • Provided sample code: No
  • Provided link: Yes