Input: undo change to make inputs same width regardless of prefix/suffix

[radoslavpetranov]

Bug

Enabling the datepicker button changes the width of the input

What is the expected behavior?

The button should not alter the width of the visible input field

What is the current behavior?

The button extends the width of the input field

What are the steps to reproduce?

http://plnkr.co/edit/8Ng4s66r3gw2I0QbINn0?p=preview

What is the use-case or motivation for changing an existing behavior?

All inputs have a uniform width creating a nicely ordered layout. That little width change screws up the the layout.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular/cli: 1.0.2
node: 6.10.0
os: win32 x64
@angular/animations: 4.1.1
@angular/common: 4.1.1
@angular/compiler: 4.1.1
@angular/core: 4.1.1
@angular/flex-layout: 2.0.0-beta.8
@angular/forms: 4.1.1
@angular/http: 4.1.1
@angular/material: 2.0.0-beta.5
@angular/platform-browser: 4.1.1
@angular/platform-browser-dynamic: 4.1.1
@angular/router: 4.1.1
@angular/cli: 1.0.2
@angular/compiler-cli: 4.1.1

[mmalerba]

@jelbourn Do you have an opinion about setting a default width on the md-input-container? currently we don't and just leave it to the user. However, this means that input's with suffix/prefix wind up a different initial width than ones without by default. (Here's an updated version of the plunker to demonstrate: http://plnkr.co/edit/pXYP1jmV38nHlUWyCJvG?p=preview)

[jelbourn]

Are there any disadvantages to setting a default width? Is it the same amount of effort to customize?

[mmalerba]

yeah, it should be about the same, they'll just have to make sure their width rule is more specific or comes after our rule (strength will be a single class selector).

[noamkfir]

I think this change is a mistake because it makes too big an assumption about the environment. An explicit width should be defined in custom themes or in the user's css, not as a default value. Setting a default width like this is not very responsive, and it's likely to be inconsistent with other components (for example, Select).

The components do not all have the same width by default and "about the same" is not much better than "different". The widths for some components also change sometimes, such as required Select fields (with the extra *), or fields with long placeholders (can't recall which right now), and possibly others.

And it makes it necessary to create selectors that are more specific than they need to be, such as form .mat-input-container when .mat-input-container should be adequate. Worse, many users won't understand why their styles aren't working and will resort to !important to force the issue.

I suggest removing the default width from the base stylesheet, providing a guide for setting it in a custom theme and/or in user css, and creating a single built-in opt-in class that defines default widths for all the relevant components. Users can apply the class once to an ancestor (or self) element to apply it "globally".

[mmalerba]

Hi @noamkfir could you give me some examples of the kinds of situations where this change causes the input to behave much differently than it used to? It seems to me like it used to just default to 176px (on chrome at least) due to the natural size of the input, now it defaults to 200px instead.

I do agree with you about the specificity issue being annoying, if I change it to an element selector rather than class would that be enough to resolve your concerns with setting the default width?

[adamdport]

I just updated material and discovered that all my inputs are now locked to 200px. Everyone's layouts are different. In a world where responsive layouts rule, it's short-sighted to assume that 200px works for anyone—let alone everyone.

Option 1 (current): everyone is forced to set their own default value somewhere, (eg. width: auto; to allow inputs to resize naturally with flex-layout) to override the 200px.
Option 2 (proposal): Only the people that are affected by this story (datepicker button changes the width of the input) set their own default value to 200px

Option 2 seems preferable to me.

[pdavin-zz]

+1, this is making our upgrade to beta.10 more difficult. We have input containers inside responsive forms (using fxFlex). So prior to this change, the input containers expanded to available width. Fixed width of 200px is not responsive. We're going to override this with a global width: auto style.

[mmalerba]

I didn't realize that change was going to impact people using flex this way. I may just undo this and people can set their own default width if they want. @jelbourn WDYT?

[jelbourn]

Seems reasonable to go back to how it was before

[mmalerba]

Reopening to track undoing this

[kelsmj]

I agree with not assuming that a form field should be set to 200px. It causes issues with flex based layouts.

[kelsmj]

Any idea when setting the mat-form-field to a default of 200px will be undone?

[mmalerba]

This has been merged now

[angular-automatic-lock-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.}