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

Make md-select, md-input, md-checkbox, md-radio-button aligned in flex container #2309

Closed
wants to merge 4 commits into from
Closed

Make md-select, md-input, md-checkbox, md-radio-button aligned in flex container #2309

wants to merge 4 commits into from

Conversation

tinayuangao
Copy link
Contributor

Fixes #2124

R: @jelbourn @kara

@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Dec 21, 2016
@tinayuangao tinayuangao requested review from jelbourn and kara December 21, 2016 01:23
jelbourn
jelbourn reviewed Dec 21, 2016
View reviewed changes
src/lib/checkbox/checkbox.scss
@@ -192,6 +192,7 @@ $md-checkbox-ripple-size: 15px;
}

md-checkbox {
margin: 16px 0;
Copy link
Member

Choose a reason for hiding this comment

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

We can't do this- none of the components can define a margin on their outer element.

src/lib/select/select.scss
$md-select-trigger-min-width: 112px !default;
$md-select-arrow-size: 5px !default;
$md-select-arrow-margin: 4px !default;
$md-select-panel-max-height: 256px !default;

md-select {
display: inline-block;
margin: 16px 0;
Copy link
Member

Choose a reason for hiding this comment

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

Same comment about margin

src/lib/select/select.scss
@@ -3,26 +3,27 @@
@import '../core/style/form-common';
@import '../core/a11y/a11y';

$md-select-trigger-height: 30px !default;
$md-select-trigger-height: 27px !default;
Copy link
Member

Choose a reason for hiding this comment

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

We may have to think more about how we want to approach this- the md-input changes its size based on the current font size, so this may only look right with a specific size

@dahaupt dahaupt mentioned this pull request Dec 29, 2016
Closed
@jelbourn
Copy link
Member

@tinayuangao can you remind me of the status on this PR?

@tinayuangao
Copy link
Contributor Author

@jelbourn The md-select, md-input, md-checkbox, md-radio-button are not aligned in flex-box because they have different height. We don't want to add extra margin and need to think about a better solution.

@EladBezalel EladBezalel mentioned this pull request Jan 16, 2017
Closed
@kara kara added in progress This issue is currently in progress and removed pr: needs review labels Feb 7, 2017
@kara kara removed their request for review February 7, 2017 18:38
@dahaupt dahaupt mentioned this pull request Feb 12, 2017
Closed
@mmalerba
Copy link
Contributor

@tinayuangao is this PR still alive?

@tinayuangao
Copy link
Contributor Author

This is not a desired fix. Close it for now

@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

Assignees
No one assigned
Labels
cla: yes PR author has agreed to Google's Contributor License Agreement in progress This issue is currently in progress
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...
6 participants
@tinayuangao @jelbourn @mmalerba @kara @googlebot @andrewseguin