DROPLIST WIDGETS

MORE RESOURCES

© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

86% OF THE FORTUNE 100

USE AXURE RP

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

MOST COMMON USE

FORM OPTIONS

A droplist—also known as a drop-down list, a drop-down menu, and a pull-down menu—is a list that contains several options of which only one can be selected at a time. Use a droplist widget in a form when there is a question with many possible choices, of which only one will be selected. For example, choosing a country from the long list of all the world's countries is typically done with a droplist.

ADD, REMOVE, AND REORDER DROPLIST OPTIONS

To add and edit options in a droplist, double-click the droplist widget to open the "Edit Droplist" dialog. Add an option to the droplist by clicking the green "+" icon. Type the text of that option in the new droplist item that gets created. To add several new options to the droplist at once, use the "Add Many" button (make sure to separate each new option with a line break).


You can use the blue arrow icons to reorder the droplist options. The red "x" icon deletes the currently selected list item, and the red "x" with the dots next to it deletes all items currently in the list.

EDITING

LOCATION AND SIZE

To move a widget, drag and drop it into place or use the arrow keys to nudge. You can also choose the exact location of a widget using the "x" and "y" fields in the top toolbar or in the Inspector’s Style tab.


When a widget is selected, a green border is drawn around it. Handles on the border can be dragged to resize the widget. To maintain the aspect ratio of a widget when resizing via the handles, hold the [SHIFT] key while dragging.


Widgets can also be resized to a specific pixel value. Use the “w” and “h” fields in the top toolbar or in the Inspector’s Style tab to set the widget size in pixels. To constrain the widget’s proportions, click the “Maintain aspect ratio” icon between the “w” and “h” fields.

STYLING

Editable properties of a droplist widget's formatting include text font and family, text color, and fill color. These properties can all be controlled from both the Style tab of the Inspector and in the Style Toolbar at the top of the interface.

INTERACTIONS

SELECTING A LIST OPTION

In the browser, the user can open the droplist and choose an option to select it.


You can also dynamically change the selected option in a droplist. Use the action "Set Selected List Option". You can choose a specific list option or use a variable to set the new selected list option. Learn about using variables here.

LIMITATIONS AND WORKAROUNDS

DYNAMICALLY ADDING AND REMOVING ITEMS

The options in a droplist cannot be dynamically changed in the HTML output, but there are a couple of ways you can approximate the effect.


You can make a dynamic panel with multiple states, each containing a droplist with different contents.


Alternatively, you can make a custom droplist using shape widgets. In addition to allowing for variable contents, a custom droplist can also have custom styling.