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.
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 =
< 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 =
< 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
Last Updated :
12 Apr, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...