This repository was archived by the owner on Sep 5, 2024. It is now read-only.
Repository navigation
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
input-container(select): label is not displayed when placeholder is specified and no selection has been made #10116
Description
Actual Behavior:
What is the issue? *When you add aplaceholderto amd-selectthat already has alabel, the label does not behave as expected.What is the expected behavior?If you have amd-selectwith alabeland aplaceholder, those should act like the angular material inputs. The label text is floating on top of the placeholder text and stays there after the user fills the input field with text. The same should be true for the select dropdown. The label text is floating on top of the placeholder text and stays there after the user selects one of the select dropdown options.
CodePen (or steps to reproduce the issue): *
CodePen Demo which shows your issue:http://codepen.io/radi/pen/JbBbPGDetails:Read expected behavior above.
Angular Versions: *
Angular Version:1.5.9Angular Material Version:1.1.1
Additional Information:
Browser Type: *Google ChromeBrowser Version: *Vers ion 55.0.2883.75 (64-bit)OS: *macOS Sierra 10.12.1 (16B2555)Stack Traces:n/a
Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.
Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.
Reacted by Sayene and Michael Krog
Activity
Sayene commentedon Dec 11, 2016
got the same problem with both safari and chrome on mac. looks like 'md-input-has-placeholder' is not correctly set. however CodePen linked above seems to work OK.
rvarbanov commentedon Dec 11, 2016
The CodePen is not working for me. How it is working for you. Please explain.
Sayene commentedon Dec 11, 2016
This is what is see rendered in your CP, and I believe this is OK
Here is the problem with some of my code where label overlaps placeholder as 'md-input-has-placeholder' is not set to md-input-container
As we have mixed experience with this it might be sync/timing issue ...need to check how /md-input-has-placeholder' is set.
rvarbanov commentedon Dec 12, 2016
Your screenshot is showing the issue. The dropdown should have the label "State" above the "Select a state" placeholder. Just like we have the label "Street Name" above the "123 Street" placeholder.
Sayene commentedon Dec 12, 2016
Oh, sorry then, I've missed the select label. You're right, select label should be visible above when there is no value selected yet and both label and placeholder are set. And I can confirm it's not visible, as you described. My issue (label overlapping with placeholder) is another issue that may or may not be related.
[-]md-select w/ placeholder label issue[/-][+]select: w/ placeholder and label doesn't display properly in md-input-container[/+][-]select: w/ placeholder and label doesn't display properly in md-input-container[/-][+]input-container(select): label is not displayed when placeholder is specified and no selection has been made[/+]Splaktar commentedon Dec 19, 2018
I can confirm that the label should be shown floating if a placeholder is defined as well. I updated the CodePen to
1.1.10(and nowHEAD) to verify that this is still an issue.For reference, I created another CodePen that demonstrates using both labels and placeholders together (which is recommended).
12 remaining items
fix(select): floating label hidden w/ placeholder and no value
fix(select): floating label hidden w/ placeholder and no value