Elements Border Battle: Text vs Button

Generally, I use text elements for buttons - who doesn’t love [fa] fa-circle-o-notch fa-spin [/fa]?. The other day I noticed that my line-height hack to get text vertically centered was failing in a certain case. I put an actual button next to a text element, turned on “center the text vertically”, and entered the rabbit hole.

Here’s the comparison page: https://nocode-to-knowcode.bubbleapps.io/version-test/buttons

Conclusion

  • Buttons top & bottom borders affect the placement of the text.
  • Text element is only affected by the top border.

They should have the same behavior, no?

@rico.trevisan

My experience is that you have got to consider the height that you assign to the text element, with the “line spacing” multiple that you set for the font style.

Things go well if you have a text element height of at least 25 if your font size is 16 with a line spacing not higher that 1.5 (which tops off at 16 * 1.5= 24 … which fits within a height of 25)

Perhaps if you check your texts for this, adapting to the appropriate numbers in your elements, it might fix things that are not working well.

Yes, that’s normally how I do things. What triggered me to try this out was a weird hover behavior on a repeating group. Anytime I hovered over a text button, the height of that RG item would grow driving me bananas.

So, instead, I decided to go pick another scab which is the text’s center text vertically. Interestingly, it does work if you take a 1-line text, turn on the center text, and add a 2px top border.



(duly noted that this post had 0 replies after 20 hours since posting. Thanks, Bubble bot :robot:.)

1 Like

I banned the use of the button element. I only use text element.
Why ? Because Font Awesome icons doesn’t work with button element
image

Yep, same here.

This topic was automatically closed after 14 days. New replies are no longer allowed.