Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(select): aligned select underline, placeholder and text with input #4063

Closed
wants to merge 1 commit into from
Closed

fix(select): aligned select underline, placeholder and text with input #4063

wants to merge 1 commit into from

Conversation

EladBezalel
Copy link
Member

@EladBezalel EladBezalel commented Apr 12, 2017 •
edited
Loading

  • added ellipsis to select placeholder
  • aligned floating placeholder with input
  • support font-size

fixes #2124

Note: the next PR would support select font-size in panel

@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Apr 12, 2017
@EladBezalel EladBezalel force-pushed the fix/inline-inputs branch 3 times, most recently from 753ae78 to ffe1a24 Compare April 12, 2017 23:14
@EladBezalel EladBezalel requested a review from kara April 12, 2017 23:58
@jelbourn jelbourn requested a review from mmalerba April 13, 2017 00:21
jelbourn
jelbourn reviewed Apr 13, 2017
View reviewed changes
src/lib/select/select.html Outdated
</div>
<div class="mat-select-value-wrapper" >
<span class="mat-select-value" *ngIf="_selectionModel.hasValue()">
{{ triggerValue }}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove spaces from inside the {{ }} while you're in here?

src/lib/core/style/_input-common.scss
@@ -0,0 +1,36 @@
@import './variables';

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add top-level description comment that mentions these are styles used by input-style components, including md-input-container and md-select

@EladBezalel EladBezalel force-pushed the fix/inline-inputs branch 3 times, most recently from 33697ca to c55fc83 Compare April 15, 2017 05:20
@EladBezalel
Copy link
Member Author

@jelbourn @kara @mmalerba can you please test and review?

@mmalerba
Copy link
Contributor

It looks like this still causes the input to be misaligned when placed with other components:
misaligned-input

It should look like this:
correct-input-align

Also, it looks like the text for the input and select is correctly aligned, but it still looks strange since they have different spacing between the text and the underline:
misaligned-select

@EladBezalel
Copy link
Member Author

@mmalerba where did you tested it?
The underline was perfect on win10 all browsers

@mmalerba
Copy link
Contributor

This was on Ubuntu (both Chrome & Firefox)

@EladBezalel
fix(select): aligned select underline, placeholder and text with input
89af97c 
- added ellipsis to select placeholder
- aligned floating placeholder with input
- support font-size

fixes angular#2124
@kara
Copy link
Contributor

kara commented Apr 20, 2017

@EladBezalel I'm seeing the same baseline mismatch between inputs and textareas on Mac + Chrome. Can you double-check?

@kara kara assigned EladBezalel and unassigned kara Apr 20, 2017
@willshowell
Copy link
Contributor

Worth noting that @mmalerba's second comment:

Also, it looks like the text for the input and select is correctly aligned, but it still looks strange since they have different spacing between the text and the underline:

...is true for me on OSX Safari but not OSX chrome

@exports
Copy link

exports commented Jun 28, 2017

Any update on this PR? After two months md-select still does not play well with md-input-container.

@jelbourn
Copy link
Member

Going to do this by moving md-select to live inside md-form-field the same as input

@jelbourn jelbourn closed this Aug 16, 2017
@EladBezalel EladBezalel deleted the fix/inline-inputs branch August 31, 2017 22:06
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@jelbourn jelbourn jelbourn left review comments

@kara kara Awaiting requested review from kara

@mmalerba mmalerba Awaiting requested review from mmalerba

Assignees

@EladBezalel EladBezalel

@mmalerba mmalerba

Labels
cla: yes PR author has agreed to Google's Contributor License Agreement
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Input components (md-input, md-select, md-checkbox etc) aren't aligned in a flex container...
7 participants
@EladBezalel @mmalerba @kara @willshowell @exports @jelbourn @googlebot