Blaze UI Input Group Fixed Width

Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.

The Blaze UI input group element displays many input fields in the form of a group using the Blaze UI classes. In this article, we will discuss the various classes required for displaying fixed width for input group elements. The fixed-width input field is displayed using the Blaze UI class without disturbing the layout of the entire input group.

Blaze UI Input Group Fixed Width classes:

• .c-input-group: This class is used to set the input group.
• .c-field: This class is used to set the input field.
• .o-field: This class is used to set one field in the input group.
• .o-field--fixed: This class is used to set the fixed width of the field without breaking the layout of the group.

Syntax:

<div class="c-input-group"> 
 <div class="o-field o-field--fixed" style="...">
 <input class="c-field" placeholder="...">
 </div>
 ....
</div>

Example 1: The following code demonstrates the input-group fixed width using the c-input-group, o-field--fixed, o-field, and c-field classes.

Output:  

Example 2: The following code demonstrates the input-group fixed width using the c-input-group, o-field--fixed, o-field, and c-field classes. The middle field is fixed as shown in the output.

Output:

Reference link: https://www.blazeui.com/components/inputs/