Topic: Accordion icons width

neocheck premium asked 2 years ago


I have a slim sidenav with some accordions inside. If I use font-awesome icons, they don't get the same width although I use the fa-fw class.

Expected behavior

All the icons with the same width and literal beginning at the same position.

Actual behavior

Icons not aligned and literals beginning at different positions.

Resources (screenshots, code snippets etc.) Here you can find the snippet: https://mdbootstrap.com/snippets/standard/neocheck/4597567


Kamila Pieńkowska staff answered 2 years ago


Here is workaround for you: https://mdbootstrap.com/snippets/standard/kpienkowska/4605763


neocheck premium commented 2 years ago

Thank you for the workaround


neocheck premium answered 2 years ago


Sorry, I think the answer is not correct. If I remove the me-2 from < i > objects and add "nbsp; nbsp;" between < i > and < span > objects I get the same problem.

I also tried adding the marging to < span > class as "ms-2" and I got the same result.

You can see the snippet where I changed the margins: https://mdbootstrap.com/snippets/standard/neocheck/4597567


Kamila Pieńkowska staff answered 2 years ago


Actually they do get centered. But margin you added to icons interfere with their position.


neocheck premium commented 2 years ago

Sorry, I think the answer is not correct. If I remove the me-2 from < i > objects and add "nbsp; nbsp;" between < i > and < span > objects I get the same problem.

I also tried adding the marging to < span > class as "ms-2" and I got the same result.

You can see the snippet where I changed the margins.



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

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.0.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes