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.

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.

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.