1

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

Karan
  • 445
  • 5
  • 15
  • 3
    It seems like a css issue to me, nothing to do with the gem. – razvans Dec 03 '21 at 08:29
  • This issue happens everywhere I use the `humanized_money_with_symbol` helper method. I don't have custom CSS for this helper. Actual code - `p = humanized_money_with_symbol product.price` – Karan Dec 03 '21 at 08:36
  • How does the generated HTML look like? – spickermann Dec 03 '21 at 09:40
  • @spickermann `

    ₹480

    `     – Karan Dec 03 '21 at 11:02
  • It looks good when it renders and then suddenly overlaps. Refer to the attached video – Karan Dec 03 '21 at 11:03
  • 2
    We can't view the video without registering with Vimeo, but it's definitely a rendering (HTML/CSS) issue and not a Rails issue - Rails is returning the text correctly (I assume that's the currency symbol you want). I'd suggest you use the Inspector in your browser to take a look at the element and see why it's being moved around. Possibly a UTF font-rendering issue, too. If "The issue only occurs on some devices", the question is *which* devices. I suggest refocusing your question after a little more investigation. – JohnP Dec 03 '21 at 11:28
  • @JohnP Thanks for the detailed answer. Yes, it was not a rails issue. The issue was due to fonts. My Font didn't support the generated currency symbol. – Karan Dec 04 '21 at 07:47

1 Answers1

-1

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

Karan
  • 445
  • 5
  • 15