Components: 'align' attribute in md-hint does not working

[alanpurple]

<md-input #desc type="text" [(ngModel)]="newPack.description"
                      name="description" maxlength="50"
                      placeholder="description">
                <md-hint align="end">{{desc.characterCount}} / 50</md-hint>
</md-input>

align is always at start

angular rc.6, material2 alpha 8-1

[DzmitryShylovich]

http://plnkr.co/edit/E15hpqHojz2Gy2mPKbmr?p=preview works as expected

[RoxKilly]

I have the same problem as the OP with Angular 2 rc 6 and Material 2 alpha 8.1

http://plnkr.co/edit/1BiwnWPB4pKkNsNlSkfE?p=preview

@DzmitryShylovich it's difficult to tell which version of Angular or Material your plunker uses. It loads this minified script which may be for older versions

[ptsydzik-zz]

@alanpurple and @RoxKilly looks like you forgot to include angular styles. for quick test try to add
< link href="https://npmcdn.com/@angular2-material/core@latest/style/core.css" >
to your index.html

[RoxKilly]

@ptsydzik good thinking, but adding core.css makes no difference. See my updated plunker link above.

[colinfang]

I can reproduce it. Also note that the position of hint is a bit too high. (it exceeds the horizontal line.)

[colinfang]

Also note there is no ripple effect for md-button at all. It used to work in alpha 7.1 http://plnkr.co/edit/0qUqDezuENJ1fAJkecsW?p=preview

[jhyde]

I'm experiencing the same issue with md-hint as RoxKilly. The class styles for .md-hint are not being applied for some reason. The styles from input.scss look like:

.md-hint {
    position: absolute;
    font-size: 75%;
    bottom: -0.5em;

    &.md-right {
      right: 0;
    }
  }

If you add those manually, somehow every looks fine.

[RoxKilly]

@jhyde I notice that you're applying styles to class class="md-hint" instead of to a tag <md-hint>. Maybe applying rules to elements that have both the class and the tag would work.

md-hint.md-hint{
    ...
}

You can also try using a more specific CSS selector. You can do this by adding a custom attribute. For example:

template

<md-input #desc placeholder="description">
                <md-hint customcss align="end">{{desc.characterCount}} / 50</md-hint>
</md-input>

CSS

md-hint[customcss]{
    ...
}

This should help the browser give priority to your CSS rules. If that doesn't work, you can add the !important flag to rules you want the browser to prioritize

md-hint {
    position: absolute !important;
    font-size: 75% !important;
    bottom: -0.5em !important;

    &.md-right {
      right: 0 !important;
    }
  }

[rolandjitsu]

I am experiencing the same issue, <md-hint> is aligned to left and exceeds the input border.

[emoralesb05]

The problem is that angular is assigning a different emulated shadowdom id for md-hint than md-inputs content, so its not actually applying the .md-hint / .md-right classes.

And since the css classes .md-hint / .md-right are actually in the md-input component, they dont cascade into md-hint. (whole point of shadowdom).

My workaround was adding the classes on a top component and using /deep/ for the time being..

.md-hint {
        position: absolute;
        font-size: 75%;
        bottom: -0.5em;

        &.md-right {
            right: 0;
        }

        [dir='rtl'] & {
            right: 0;
            left: auto;

            &.md-right {
            right: auto;
            left: 0;
            }
        }
    }

[jelbourn]

@crisbeto can you determine if this is still an issue? It may have already been fixed in master.

[alanpurple]

@jelbourn not anymore, seems solved

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}