Skip to main content
Question

Making a button header look better

  • August 17, 2019
  • 0 replies
  • 23 views

Forum|alt.badge.img+11
I have a complex project form and there are buttons all over.  What I realized is navigation was really choppy so I am creating a Quick Action section at the top.  However, as you can see from this screenshot, because it is in a section header the buttons are aligning which is great but they are stretching the button size and creating bay boxes.    Plus, ideally, i would want them horizontally centered.

I am going to have two rows of buttons, and I dont need them all lined up each other.  But I do want the width of each button to match, ideally.

Any ideas on how to fix this and/or just in general make this look better on a form?

AdamKeever1
Forum|alt.badge.img+2
  • Quickbase Alumni
  • August 28, 2019
Try using a formula rich text field and placing your buttons in an HTML table. I did this with icons and formula text fields to create a rich visual for ergonomics:


I started out by making smaller combination fields; example [L Wrist_combo]:

"<div align=\"center\" >"

&

List("<br>",
"L Wrist",
"Risk = " & ToText([L Wrist Total]),
[L Wrist Risk Icon],
[L Wrist Risk Rating])​

Then combined the smaller combos; example [Visualization_combo]:

"<table style=width:100%>
  <tr>
    <td style=width:100% colspan=7 align=center> "&[Overall_combo]&" </td>
  </tr>
  <tr style=width:100% align=center>
    <td "&[L Wrist_combo]&" </td>
    <td "&[L Elbow_combo]&" </td>
    <td "&[L Shoulder_combo]&" </td>
    <td "&[Neck_combo]&" </td>
    <td "&[R Shoulder_combo]&" </td>
    <td "&[R Elbow_combo]&" </td>
    <td "&[R Wrist_combo]&" </td>
  </tr>
  <tr>
    <td style=width:100% colspan=7 align=center><img src = https://XXXX.quickbase.com/up/XXXX/g/rb/eg/va/5%20Joints.jpg height=200;></td>
  </tr>
  <tr>
    <td style=width:100% colspan=7 align=center> "&[Back_combo]&"</td>
  </tr>
</table>"​


You can do this with buttons that are formula rich text buttons; I was not able to get this to work with formula URL buttons.

Example:


"<table style=width:100%>
  <tr>
    <td style=width:100% colspan=3 align=center> "&[save]&" </td>
  </tr>
  <tr style=width:100% align=center>
    <td "&[change]&" </td>
    <td "&[change2]&" </td>
  </tr>
</table>"​


------------------------------
Adam Keever
------------------------------