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









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.


– James

[call_two href=”” 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[/call_two]

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