| Table of Contents |
|---|
Introduction
There may be instance where form fields are required to be formatted side by side such as when developing a "First Name & Last Name" or "Currency Selector" and many more. This article will discuss on how to format form field side by side through a "Currency Selector" example.
Steps Example
Step 1
Drag a select box and text field into the form
Figure 1: Select Box and Text Field in form
Step 2
Configure select box accordingly by adding desired currency label and value.
Figure 2: Select box configuration
Step 3
Paste the following JQuery script into a custom HTML script inside the form. The script will set the initial value of the 'value' field to the selected option in the dropdown box upon page load and selection, thus allowing dynamic interaction.
| Note |
|---|
Be sure to change the JQuery selector name to the respective Select Box and Text Field ID otherwise the script wouldn't work. |
Figure 3: JQuery Script
Step 4
Next, apply CSS to both the Select Box and Text Field to have them positioned side by side.
Select Box Styling
Figure 4: Select Box Element Styling
Figure 5: Select Box Field Label and Input Styling
Text Field Styling
Figure 6: Text Field Element Styling
Figure 7: Text Field Label and Input Styling
Step 5
See the result
Figure 8: Result
Sample App
| View file | ||||
|---|---|---|---|---|
|