Select1 Button

This page is obsolete and available for historical purposes only.


The <fr:select1-button> provides an alternative UI to the <xforms:select1 appearance="minimal"> which is rendered as a regular drop-down. You might want to use this control over the <xforms:select1 appearance="minimal"> when:
  • You need to style the control in a particular way, as native form controls often can't be styled to obtain the desired result across browsers. An example of this is the auto-complete control, which uses the <fr:select1-button> when the show-full-itemset-dropdown="true" attribute is present. In that case, the control is styled to hide the text of the selected item, since that text will be shown already in the input field next to the <fr:select1-button>.
  • You want to use a control which looks exactly the same across browsers.
  • You have long labels in your list, and need to support IE. Unfortunately, when using a drop-down on IE, the width of the drop-down when it is not open is the same as the width of the area from you make a selection after opening the drop-down. Items that don't fit in the width of the drop-down are truncated. When this happens, users might not be able to make the difference between two label that only differ in their ending. Consequently, when using a regular drop-down, you need to make sure the drop-down is "wide enough". You might find it hard to choose a width if the content of the drop-down is hard to predict, and if the width needs to be rather large, you might not be pleased with the aesthetic of the result. The <fr:select1-button> solves this problem.


You can use this component as you would use an <xforms:select1 appearance="minimal">, for instance:

<fr:select1-button ref="state">
    <xforms:itemset nodeset="instance('states')/state">
        <xforms:label ref="@name"/>
        <xforms:value ref="@abbreviation"/>

This is rendered as:

If you click on the button, it shows the list of the possible values in a drop-down: