Blaze UI Input Group Fixed Width

Last Updated : 12 Apr, 2022

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.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Blaze UI</title>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1">    
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/[email protected]/dist/blaze/blaze.css">
    <style>
       body {
        margin-left: 10px;
        margin-right: 10px;
       }
    </style>
</head>

<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <strong>Input group fixed width</strong>
        </br></br>
        <div class="c-input-group">
            <div class="o-field">
                <input class="c-field" 
                    placeholder=".c-input-group">
            </div>
            <div class="o-field o-field--fixed" 
                style="width:500px">
                <input class="c-field" 
                    placeholder="Fixed 500px input width">
            </div>
            <div class="o-field o-field--fixed" 
                style="width:180px">
                <input class="c-field" 
                    placeholder="Fixed 180 px input width">
            </div>
            <div class="o-field">
                <input class="c-field" 
                    placeholder=".c-input-group">
            </div>
        </div>
    </center>
</body>
</html>

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.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Blaze UI</title>
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/[email protected]/dist/blaze/blaze.css">
    <style>
       body {
        margin-left: 10px;
        margin-right: 10px;
       }
    </style>
</head>

<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <strong>Input group </strong>
        </br></br>
        <div class="c-input-group">
            <div class="o-field">
                <input class="c-field" 
                    placeholder=".c-input-group">
            </div>
            <div class="o-field o-field--fixed" 
                style="width:60%">
                <input class="c-field" 
                    placeholder="FIXED 60% input width">
            </div>
            <div class="o-field">
                <input class="c-field" 
                    placeholder=".c-input-group">
            </div>
        </div>
    </center>
</body>
</html>

Output:

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

Blaze UI Grid Fixed widths

geetanjali16

Improve

Article Tags :

Blaze UI Input Group Fixed Width

Similar Reads

Thank You!

What kind of Experience do you want to share?