input: label overflows and shows horizontal scrollbar

[rhllor]

Hi,
I use mdDialog for create a fast form. From version 1.0.2 i have a problem with Internet Explore 11.

When an input text get focus an horizontal scrollbar appears.

This is the template code:

<md-dialog aria-label="Log"  ng-cloak>
<md-dialog-content layout="column" class="md-dialog-content">
<md-input-container class="md-block">
          <label>Biography</label>
          <textarea ng-model="vm.Note" ></textarea>
        </md-input-container>
</md-dialog-content>
</md-dialog>

[rhllor]

Hi,
we found this problem with IE

md-input-container.md-input-focused label:not(.md-no-float), md-input-container.md-input-has-placeholder label:not(.md-no-float), md-input-container.md-input-has-value label:not(.md-no-float) {

    -webkit-transform: translate3d(0, 6px, 0) scale(0.75);
            transform: translate3d(0, 6px, 0) scale(0.75);
    transition: -webkit-transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s, width cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s;
    transition: transform cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s, width cubic-bezier(0.25, 0.8, 0.25, 1) 0.4s;
    width: calc((100% - 18px) / 0.75); 
}

The Attribute width generate this problem. If we remove this attribute we don't have more bug and all work fine.

[topherfangio]

@crisbeto The calc() does it's calculations based on the viewport width. Do you think you can find another way to achieve whatever this is doing?

[peio72]

Problem remaining on IE11 with 1.1.0-rc3. Visible on demo input.

[crisbeto]

@peio72 I couldn't reproduce this particular issue on IE11 with rc3. The overflow that you see in the demo is because of the datepicker. If you add a display: none it goes away.

[peio72]

I still see the scrollbars on the demo input on my IE11 for the basic usage and the icons.

On my App the problem is only present on the inputs with icons.

[crisbeto]

The scrollbar on the demo is because of the datepicker, not the input. As for having the icons together with an input, can you post a code example or a codepen?

[crisbeto]

I don't know your email address.

[peio72]

I updated my profile, you should be able to contact me so I can show you the live example. Thanx.

[crisbeto]

I'll reopen this one because it's still an issue. I managed to reproduce it using @peio72's example.

[ThomasBurleson]

This issue is closed as part of our ‘Surge Focus on Material 2' efforts.
For details, see our forum posting @ http://bit.ly/1UhZyWs.