Align button at top of field in form

  • 0
  • 1
  • Question
  • Updated 1 year ago
  • Answered
Hi,
I've added a formula rich text field button and it appears in the centre of the field on a form. I would like to lift the button & text height so they take less vertical space on the form. I have tried align & vertical align with no success.

"<a  class='Vibrant Snowy' style=\"height:25px; align:top; text-align: top;\"  href='" ...

Also, when viewing a form, all fields have automatic grey backgrounds. Is there a way to remove the field backgrounds so they look like the rest of the form (same as they do in edit)?
Thanks.
Photo of Gary Boyd

Gary Boyd

  • 840 Points 500 badge 2x thumb

Posted 1 year ago

  • 0
  • 1
Photo of Matt NZ

Matt NZ

  • 296 Points 250 badge 2x thumb
Check out dabuttonfactory.com - it might have the answer you are looking for.
Also, the Magic Buttons app is a great free QB app too.

Here's a button that's smaller than your default Vibrant Snowy:
// Begin button style
var text bgcolor = "white";
var text txtcolor = "#4285F4";
var text style = "style=\"text-decoration: none; background:" & $bgcolor & "; border-radius: 5px; padding: 40px 20px; color: " & $txtcolor & "; display: inline-block; font: normal 700 24px/1 \"Calibri\", sans-serif; text-align: center; text-shadow: none;";
// End button style

"<a " & $style & " href='https://www.w3schools.com/colors/colors_brands.asp' title='Brand Colors'>Google Blued</a>"

// Great resource to create our own style of button. https://dabuttonfactory.com/
// Other brand colors: https://www.w3schools.com/colors/colors_brands.asp
Photo of Gary Boyd

Gary Boyd

  • 840 Points 500 badge 2x thumb
Thank you for your help and apologies for my delay. Been caught up, but I will definitely try this soon.
Photo of Gary Boyd

Gary Boyd

  • 840 Points 500 badge 2x thumb
Thank you. https://dabuttonfactory.com is an excellent resource as is magic buttons.
My text alignment on the buttons is not working and the text shows in top left. I want the text in middle of button - for both horizontal and vertical. I think I am missing the matching quotation mark before background. This one: style=\"background:#ffffff

Formula below:
// Begin button style
var text style = "style=\"background:#ffffff;border:1px solid #cccccc;border-radius: 5px;box-shadow:0 1px #666666;width:65px;height:15px;color:#000000;display:inline-block;font:normal 400 12px/15px\"Open Sans\",sans-serif;text-align:center;text-shadow:1px 1px #f3f3f3;";
// End button style

"<a " & $style & 

" href='" & ...

Thanks for any help on where to place missing quotation or perhaps some other error is present. 
(Edited)
Have you tried using just the class without the additional style parameters?
Photo of Gary Boyd

Gary Boyd

  • 840 Points 500 badge 2x thumb
Thanks - it is in center if I remove my style setting. Lose control over button style, but the text does centre.