Search code examples
cssangularjsangular-materialmddialog

Trying to stop angular material input container with icon float inside dialog from resizing the dialog

just trying to build a simple login form with angular material ans so far i've got this: 

<md-dialog aria-label="Login">
<form name="loginForm">
    <md-toolbar layout="row" layout-padding layout-align="center center">
        <span class="md-toolbar-item md-headline">Login</span>
    </md-toolbar>
    <md-dialog-content layout-padding>
        <md-input-container class="md-icon-float">
            <md-icon class="md-dark" aria-label="username">person</md-icon>
            <input type="text" ng-model="user.name" placeholder="Username">
        </md-input-container>
        <md-input-container class="md-icon-float">
            <md-icon class="md-dark" arial-label="password">lock</md-icon>
            <input type="text" ng-model="user.password" placeholder="Password">
        </md-input-container>
    </md-dialog-content>
    <div class="md-actions">
        <md-button aria-label="Cancel">Cancel</md-button>
        <md-button class="md-primary" aria-label="Login">Login</md-button>
    </div>
</form>

which produces this:

Basic login form untouched. Good enough

Now when I turn the password input active, and the little label floats up, it's resizing the entire dialog and pushing the username field up. It's a small gripe i know, but it doesn't look good at all, and i'm sure this must be something really trivial (my css is currently a work in progress)

cheers

Solution

  • If anyone might be facing this problem, after much time I actually identified the problem:

    md-input-container.md-icon-float {
    margin-top: -16px;
    transition: margin-top 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

    The only reason this only happens on the second input container in the dialog (the password field) is 

    md-dialog md-dialog-content:not([layout=row]) > *:first-child:not(.md-subheader) {
    margin-top: 0;
}

    So the first element in the md-dialog-content is not affected.

    I'm perplexed as to the need for this transition (also referenced in issue 2991 on their repo anyway,

    you can either insert an inline style on the md-input-container, 

    <md-input-container class="md-block md-icon-float md-icon-left" style="margin-top: 0;">
            <md-icon class="md-dark" arial-label="password">lock</md-icon>
            <input type="password" ng-model="user.password" placeholder="Password">
            <div class="md-errors-spacer"></div>
</md-input-container>

    or put each md-input-container element in a separate md-dialog-content (not sure if that's really the intended way to use md-dialog-content, so i went for the first solution)

    Hope this helps someone, really small issue but can waste a lot of time for the nitpicky.