Discussions

Expand all | Collapse all

Align button at top of field in form

  • 1.  Align button at top of field in form

    Posted 04-15-2018 05:17
    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.


  • 2.  RE: Align button at top of field in form

     
    Posted 04-16-2018 00:15
    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


  • 3.  RE: Align button at top of field in form

    Posted 04-19-2018 04:55
    Thank you for your help and apologies for my delay. Been caught up, but I will definitely try this soon.


  • 4.  RE: Align button at top of field in form

    Posted 04-21-2018 03:57
    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. 


  • 5.  RE: Align button at top of field in form

    Posted 04-23-2018 21:29
    Have you tried using just the class without the additional style parameters?


  • 6.  RE: Align button at top of field in form

    Posted 04-29-2018 10:16
    Thanks - it is in center if I remove my style setting. Lose control over button style, but the text does centre.