Adjust The Width Of a Field Label And Input Area

In this guide, we will explain how to adjust the width of a field label and input area using custom attributes.

Adjust the width of CheckBox:

Click the pencil icon of CheckBox. Then click the “Add Custom Attribute”.

image

The width of a field consists of 12 columns. For example, you can adjust the width of the label to 6 columns and the input area to 6 columns:

Type
Attribute
Value
container
class
col-sm-6
label
class
col-sm-6
image

View on the form:

image

Or adjust the width of TextArea (label width to 4 columns and the input area to 8 columns):

Click the pencil icon of TextArea. Then click the “Add Custom Attribute”.

image

For example, you can adjust the width of the label to 4 columns and the input area to 8 columns:

Type
Attribute
Value
container
class
col-sm-8
label
class
col-sm-4
image

View on the form:

image

[Optional] You can also set the field label text to align to the left side. For example:

Type
Attribute
Value
label
style
text-align: left
image

View on the form:

image
image

Adjust the width of a Text Field:

Click the pencil icon of the Text field. Then click the “Add Custom Attribute”.

image

You can adjust the width of the input area to 3 columns:

Type
Attribute
Value
container
class
col-sm-3
image

View on the form:

image

For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂