CODEWITHSUNDEEP
angularstylesangular-material2
k.vincent
k.vincent

Reputation: 4133

Angular 2 with Material Design - Responsive behaviour not working?

I'am using Angular Material with Angular2. The code contains md-card, md-content, md-input-containerand some other Material design directives.

In the start page (app.component) I'am using md-tab-group with 3 tabs. In one of them the form is being loaded... it works as expected. My issue is then how to make the form-width around 33% and centered but keep the responsive behaviour by mobile devices.

I did few CSS workarounds with DIVs and other CSS definitions, and was able to change the Width to 33% and center it, but I loose the responsive behaviour of the page and therefore none of my CSS definitions did help (by iPhone 6 portrait, the form is too small.. takes 100% of 33% of its wrapper)

I don't want to add media queries because I would like to use the Built-In Material Design responsive features.

login.component:

<md-card>
    <form #form="ngForm" method="POST">
        <div>
            <md-input-container>
                <md-placeholder>
                    <md-icon mdPrefix>mail</md-icon> Email
                </md-placeholder>
                <br>
                <input mdInput name="email" [(ngModel)]="email" #inputMail required>
                <md-error>Email is required</md-error>
            </md-input-container>
        </div>
        <div>
            <md-input-container>
                <md-placeholder>
                    <md-icon  mdPrefix>lock_outline</md-icon> password
                </md-placeholder>
                <br>
                <input mdInput type="password" name="password" [(ngModel)]="xxx" #inputPass required="">
                <md-error>Password is required</md-error>
            </md-input-container>
        </div>
        <br>
        <div class="button-row">
            <button type="submit" class="submit" md-button (click)="loginCheck(inputMail.value, inputPass.value)">Sign in</button>
        </div>
    </form>
</md-card>

app.component:

<md-tab-group flex>
    <md-tab label="Login">
        <div id="page-padding">
            <router-outlet></router-outlet> //loading login form
        </div>
    </md-tab>
    <md-tab label="Sign Up">
        <br><br>
        <div id="page-padding">
            <router-outlet name="content"></router-outlet>
        </div>
    </md-tab>
    <md-tab label="How To">
        <router-outlet name="howto"></router-outlet>
    </md-tab>
</md-tab-group>

<div layout-align="center center">
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    </div>
</div>

Any Idea how to fix this please? Should I install (using npm) and/or import any further packages for responsive behaviour?

Upvotes: 0

Views: 1531

Answers (2)

Edric
Edric

Reputation: 26740

Simply install @angular/flex-layout via npm:

npm install --save @angular/flex-layout@latest

Then import the module in your app.module.ts:

import {FlexLayoutModule} from '@angular/material';
// ...
@NgModule([
    imports: [
        FlexLayoutModule,
        // ...
    ]
])
export class AppModule {}

To use flex, add an attribute fxFlex to the part where you want to put it:

<md-tab-group fxFlex>
<md-tab label="Login">
    <div class="page-padding">
        <router-outlet></router-outlet> <!--loading login form-->
    </div>
</md-tab>
<md-tab label="Sign Up">
    <br><br>
    <div class="page-padding">
        <router-outlet name="content"></router-outlet>
    </div>
</md-tab>
<md-tab label="How To">
    <router-outlet name="howto"></router-outlet>
</md-tab>

Check out the @angular/flex-layout wiki for more info, more attributes and what they do.

Notes:

  1. Please use a unique id for each tab's padding or use class instead.
  2. Please DON'T mix material-design-lite and angularjs-material together!
    • For example, replace layout-align with fxLayoutAlign and flex with fxFlex.

Upvotes: 1

Dean Chalk
Dean Chalk

Reputation: 20461

Im pretty sure you can fix your issues if you use Angular Flex Layout

https://github.com/angular/flex-layout

It automatically handles media query breaks and other responsive issues. It works well in conjunction with Angular Material

Upvotes: 1

Related Questions