Button font spacing changing

I created several buttons and whenever I do anything to the scene the fonts’ spacing changes. It goes from 18 to 0 every time I do anything at all. I have gone and created the buttons again and it keeps happening. Any suggestions? I have attached the file with the issues.button issue.zip (35.2 KB)

Hi Brooke!

I’ve had something similar happen to me - and my conclusion then, as now, looking at your Hype project is that an exorcism is in order :hot_face:

Note: I assume you are referencing line height not spacing as You reference “18 to 0”.

Nothing I did could change the incorrect display of the text in the buttons. (And, as You know, not only was the Preview incorrect the buttons would “unset” themselves in the editing screen.)

  1. Changed the font to other faces.
  2. Copied the buttons; reset them.
  3. Edited the innerHTML (removing the font tags)
  4. Selected~deselected in the Document Inspector: “Position with CSS top/left” & “Webkit Graphics Acceleration” (grasping at straws here - but it is one of my go to’s for funky behavior of this nature).
  5. Etc.etc.

What is weird is that the “Hover” & “Pressed” button control settings work fine.
Something is rotten in Denmark.

There are two things that work (Holy Water not needed)…

1. Place a span tag in the innerHTML:
<span style="line-height:18px;"> &nbsp; Future audit innovations</span>

Is there a reason why You are using “&nbsp;”?
Why not just used “left” padding? Much easier to control & adjust.

2. Re-Created the button in another Hype file and brought it into your document.

button issue_JHSv1.hype.zip (26.5 KB)

I did some searching; looks like this is a long-standing bug in Hype due to the nature of trying to have an automatic mode for line height and it being set in conjunction with buttons.

If you want to use line height with buttons, you must presently explicitly set it first in the normal state (even if it means just moving the slider up and back) before you can work on it in other states.

Sorry about this!


Okay thank you so much Jim & Jonathan!! I am glad to know that I am not crazy. Yes I did mean line height - what can I say - it was Friday afternoon! Are you suggesting instead of utilizing line height - utilize padding? What I have done previously is bring them in as art work and create them in another app- but I would prefer to create them in Hype if possible.

1 Like

Well that is a good point - I think I was just having issues insuring that it was in the middle of the button vertically - and padding was too much padding - but I will play around with it again. Thank you. And thanks for giving me something to laugh about.

No. You did not spec what the numbers “18-0” referenced so I assumed “line height” as I did not see any padding; but the main issue was things were not functioning properly which @jonathan cleared up for us - or at least one possible reason why things were acting weird - and his advice worked with new buttons I created.

Here’s to Friday afternoons… :smiley::tada:

I forgot to address another aspect of your padding question.

My suggestion was to use left padding on the buttons instead of the &nbsp; - unless there was a critical reason for doing so. The left padding makes it easier to adjust the spacing as it can be more granular (pixel vs. text spacing) and if You want to adjust all the left spacing at once You can select all the buttons and change the left padding at one time vs. opening the innerHTML of each individual button to make a change.

1 Like

Well I was using nbsp b/c I couldn’t seem to control the vertical alignment in the buttons. I want them to be dead in the middle.

You are right - it worked. Thank you both!