Web Direct: Tips & Tricks – Buttons

Anyone who has used FileMaker Web Direct has noticed interesting behaviors in how your solution looks between the application and online. For this example, I am going to focus on buttons in Web Direct using Safari. (*Note: I duplicated the layout to keep it separate, so I could also remove features that are not compatible with Web Direct.)

The image below shows how the buttons are styled in the Application with the text centered.

FileMaker Buttons

 

Now here is what happens when I open the same layout in Web Direct. As you can see, the text has defaulted to the left, but remains centered on the button.

FileMaker Button in Web View (Before)

 

So, how do we get this to look more like the solution? The quick “work-around” is to use Padding in your Inspector. To do this I used a different amount of padding on each button, getting it as close to the center as possible. In the case of the Find button shown below, I changed the left padding to 32 and left aligned the text.

FileMaker Inspectorfind_button

 

 

 

 

 

 

 

[space]

As you can see from the image below, the buttons in WebDirect now have the appearance of buttons running in FileMaker on the desktop.

FileMaker Button in Web (After)

 

 

Keep watching for other Web Direct Tips coming soon.

[space]

– James

[call_two href=”http://scarpettagroup.com/filemaker-contact-us/” label_button=” Contact us!” class=”call-to-action-two” colorstart=”#c4c4c4″ colorend=”#FFFFFF” colortext=”#000000″ icon_size=”20″ color=”” align=”vertical” width=”small” icon=”icon-check” ]If you have any questions or would like to have assistance converting your solution(s) to WebDirect, please contact us at scarpettagroup.com[/call_two]

James Scarpetta
The Scarpetta Group, Inc.
FileMaker 13/12 Certified Developer & FBA Trainer
james@scarpettagroup.com
Follow us on Twitter: @scarpettagroup

2016-11-01T17:01:17+00:00 By |

About the Author:

James Scarpetta

James’ focus is designing beautiful FileMaker layouts. He has strong skills with integrations to accounting systems and translating business requirements to a successful user experience. When not building applications you can find him behind his camera.