Button

Status

This page is obsolete and available for historical purposes only.

Overview

The fr:button component behaves like a regular push-button, but it is rendered in a platform independent way. You use a fr:button just like you would use an xforms:trigger, for instance:

<fr:button>
    <xforms:label>Click me</xforms:label>
    <xforms:action ev:event="DOMActivate">...</xforms:action>
</fr:button>

Styling

By default, buttons are sized depending on their content. Hence, a button with a longer label will be wider than a button with a shorter label. In certain cases, you want a number of buttons to have a width you choose, rather than their size being dictated by their content. You can do this with CSS; for instance, the following will set the width of the buttons on your form to 15em:

.xbl-fr-button .first-child { width: 15em }
.xbl-fr-button .first-child button { width: 100% }



Comments