Responsive form
Build in responsiveness into your angular form using the grid layout. Define how the form elements behave across multiple screen sizes.
- The column widths will adapt to the screen size based on the predefined .mbsc-col-{breakpoint}-{size} classes.
- The examples are using the .mbsc-col-md-6, .mbsc-col-lg-6 and .mbsc-col-lg-3 classes.
Demo
<div class="mbsc-row">
<div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
<mbsc-input label="Email" inputStyle="box" labelStyle="floating" placeholder="Enter your email address"></mbsc-input>
</div>
<div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
<mbsc-input label="Password" inputStyle="box" labelStyle="floating" placeholder="Set a password" [passwordToggle]="true"></mbsc-input>
</div>
<div class="mbsc-col-12 mbsc-col-lg-6">
<mbsc-input label="Address" inputStyle="box" labelStyle="floating" placeholder="What is your address?"></mbsc-input>
</div>
</div>
<div class="mbsc-row">
<div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
<mbsc-input label="Town" inputStyle="box" labelStyle="floating" placeholder="Enter your town"></mbsc-input>
</div>
<div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
<mbsc-input label="State" inputStyle="box" labelStyle="floating" placeholder="Select your state"></mbsc-input>
</div>
<div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
<mbsc-input label="Zip" inputStyle="box" labelStyle="floating" placeholder="What is your zip code"></mbsc-input>
</div>
<div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
<mbsc-input label="Country" inputStyle="box" labelStyle="floating" placeholder="Select your country"></mbsc-input>
</div>
</div>
<div class="mbsc-row">
<div class="mbsc-col-12 mbsc-col-md-12 mbsc-col-lg-3">
<div class="mbsc-button-group-block">
<mbsc-button color="success">
Create account
</mbsc-button>
</div>
</div>
</div>
ComponentTemplateCSS
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { MbscModule, setOptions } from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent {}
<mbsc-page>
<div class="mbsc-grid mbsc-form-grid">
<div class="mbsc-row">
<div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
<mbsc-input label="Email" inputStyle="box" labelStyle="floating" placeholder="Enter your email address"></mbsc-input>
</div>
<div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
<mbsc-input
label="Password"
inputStyle="box"
labelStyle="floating"
placeholder="Set a password"
[passwordToggle]="true"
></mbsc-input>
</div>
<div class="mbsc-col-12 mbsc-col-lg-6">
<mbsc-input label="Address" inputStyle="box" labelStyle="floating" placeholder="What is your address?"></mbsc-input>
</div>
</div>
<div class="mbsc-row">
<div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
<mbsc-input label="Town" inputStyle="box" labelStyle="floating" placeholder="Enter your town"></mbsc-input>
</div>
<div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
<mbsc-input label="State" inputStyle="box" labelStyle="floating" placeholder="Select your state"></mbsc-input>
</div>
<div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
<mbsc-input label="Zip" inputStyle="box" labelStyle="floating" placeholder="What is your zip code"></mbsc-input>
</div>
<div class="mbsc-col-12 mbsc-col-md-6 mbsc-col-lg-3">
<mbsc-input label="Country" inputStyle="box" labelStyle="floating" placeholder="Select your country"></mbsc-input>
</div>
</div>
<div class="mbsc-row">
<div class="mbsc-col-12 mbsc-col-md-12 mbsc-col-lg-3">
<div class="mbsc-button-group-block">
<mbsc-button color="success"> Create account </mbsc-button>
</div>
</div>
</div>
</div>
</mbsc-page>
.mbsc-ios .mbsc-form-grid .mbsc-textfield-wrapper {
margin: 0.75em 1em;
}