Parent | Child | Previous | Next
 

Creating a List of Switch Controls

Description

A common design pattern in mobile applications is to have a series of Switch controls to set logical values.

Discussion

A common design pattern in mobile applications is to have a series of Switch controls to set logical values. For example:

images/listofswitches.png

The list of Switch controls was created by wrapping it in a ControlGroup Container and modifying the style of the control and control's label. The Width for every Switch control is also set to 100%, so it will fill the row.

images/listofswitches2.png

Notice that the Control Container Classname property has been set to a custom class name (code below.)

In the CSS, we first set the control container to have a relative position - which means all absolutely positioned child elements will be positioned relative to the parent - allowing parent width and position to be honored be the child.

We then set the first level of child DIVs (of which there is only one - the switch itself - the label is a <label> element) to have an absolute position, a specific width, and a right location of 0px - which means it will stick to the right of the parent.

.switchCtrlGroup {
position: relative;
}
.switchCtrlGroup > div {
position: absolute;
right: 0px;
width: .75in;
}

Download this example component to learn more.