Search code examples
ruby-on-railsrubyrubygemsbootstrap-5money-rails

Money-rails Gem currency symbol overlapping issue on some devices


I'm using money-rails latest version. The humanized_money_with_symbol helper currency symbol overlaps with the value like shown in the image below:

enter image description here

Code -

p = humanized_money_with_symbol product.price

This works properly on the latest devices like MacBook, pixels, iPhones. The issue only occurs on some devices.

Gem details -

ruby '3.0.0'

rails, '~> 6.1.4'

money-rails, '~> 1.15.0'

bootstrap 5 webpack version - latest

fonts - Source Sans Pro, arial, sans-serif

Attached video link below for more details -

Money rails issue Video


Solution

  • It's not a rails issue as suggested by others in the comment section. Source sans pro font didn't support my currency symbol.

    Fix - Change the font family

    p.custom-font = humanized_money_with_symbol product.price