Problem with Mac OSX monospace fonts in textarea

[gustalima]

Hi,

I've been testing my website on different platforms and browsers to check compatibility and I got a problem. When I use Windows (7,8,8.1 or 10) with many browsers and Linux (Ubuntu and CentOS, my output in a textarea is aligned. There is a problem with textarea interpretation, but this is browser specific so I'm not really worried now, but in Mac OSX I have a problem with any browser. As much as I use Roboto mono or any other monospaced font, the blank spaces in the text area are not the same size as letters (even with tabs), and I cannot align properly. Is there a way to align the text better than adding tabs?

The website is www.ifsc.usp.br/htpoligo (load examples and hit obtain primers) If you check the javascript, you can see that I added a statement to check the OS version trying a specific solution, but none worked.

Thanks for any help you can provide.

[sgomes]

The problem is that you're apparently adding nonbreaking spaces to the label:

<label class="mdl-textfield__label" for="Tm">&nbsp;&nbsp;&nbsp;&nbsp;In ºC...</label>

That will definitely misalign things :)

If you wish to move the textfield further in so it doesn't touch the edges of the card, just add some padding to your card. Actually, you probably won't even need to, if you add a card body (instead of just using the title followed by <br>s):

<div class="mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title">
    <!-- Your title goes here -->
  </div>
  <div class="mdl-card__supporting-text">
    <!-- Your card content, if any, goes here -->
  </div>
  <div class="mdl-card__actions">
    <!-- Your actions (the stuff at the bottom of your card), if any, go here -->
  </div>
</div>

You can check the card docs for more details: http://www.getmdl.io/components/index.html#cards-section

[gustalima]

I mentioned the alignment of the results textarea, as in Mac OSX the content as misaligned. To actually solve the problem I set a statement checking OS and changing font of the textarea to andalo mono. Somehow OSX does not load roboto font family the same way linux and windows (and android, windows phone or iOs) does...

[sgomes]

@gustalima sorry, I'm having trouble following what you're describing :-/ Is there any chance you could prepare a small codepen illustrating the issue? Feel free to reopen the issue if this is still failing!

[gustalima]

@sgomes thx for giving another shot to my problem. I tried to reproduce the problem with codepen but I couldn't. I uploaded a screenshot in imgur with what I meant.

http://i.imgur.com/tBtUdwk.png

The text that are aligned with the header uses Andalo Mono, and the misaligned uses default font. I believe it is something related to fonts load on OSX (maybe with roboto).

[sgomes]

@gustalima The Roboto font isn't monospaced, so I'm not entirely sure how that could be aligned. I'm sorry, but I'm really having trouble understanding what the issue here is, let alone whether it's related to MDL or just an issue with fonts in OS X. I suggest you try StackOverflow, you may have a bit more luck there!