add floating label to md-select

[hodeyp]

When an md-select has a value, the placeholder should be used as a floating label to keep consistent with the md-input directive

[ruslansafronov]

Regarding to behavior of this material element, this kind of menus appear above all other in-app elements and floating labels relevant only for input elements. For more understanding look into "Do not" section in component behavior.

[marcysutton]

Actually I think it should be an option. If you look at the single-line text fields example in the design spec, there are selects with values both with and without floating labels. Perhaps an explicit <md-select-label> could float, and a placeholder attribute would not?

[hodeyp]

I'd almost suggest the other way round @marcysutton. If a placeholder is defined within the md-select this is the default value displayed when nothing has been selected. the md-select-label is used when you want to transform a key/value pair from key to value.

e.g, in a simple md-select placeholder="Country" when nothing has been selected the placeholder shows 'Country', when a value has been selected the placeholder floats and the selected value (or md-select-label) is displayed in the main content section.

[ruslansafronov]

It seems to me you're referring to the label at the top of the selected option,as shown here: Simple menus (see the "Simple menus" section)
I agree with this. But if you need a simple <label> inside the md-select, try the second example at material.angularjs.org:
<md-optgroup label="Country">

[ruslansafronov]

But anyway, you describing different element. As stated in the specification "Menus are positioned over their emitting elements such that the currently selected menu item appears on top of the emitting element. " . And floating label will not be visible until the menu is open. The element you looking for is the label and the predefined option below.

[hodeyp]

I think we may be talking at cross purposes, so here is an example. Imagine an app where a user is arranging travel and they have to select the departure and arrival countries...

Once the countries are both selected it is no longer clear to the user which is the departure and which is th arrival country as the labels (placeholders) are no longer visible...

Once an option has been selected, it would be great for the placeholder to float in the same way as the md-input-container to make it clear to users what the field is they have selected

[ruslansafronov]

In most cases, these elements have a label or icon on the sides. Or in another case, the input field that indicates the purpose of adjacent elements. The input "New York" represents value in select-box.

Speaking specifically about the material components. For those occasions when we need to show at once the category/type name and value, you must use another element which has a different look, but performs much the same function:

[sebastiengiroux]

I agree with @marcysutton that it should be an option.

When used within a form as a "select", a floating label is necessary so that it looks like other "input" element within the form.

However, when used as a "menu" (e.g.: in a toolbar), a floating label might not be necessary.

[hodeyp]

@sebastiengiroux - thanks, this is exactly what is needed. To make a form consistent it should be possible to put a floating label on the md-select directive.

One thing to highlight though with regards to @marcysutton suggestion.

the md-select-label is a great tool to transform the displayed value, I would suggest this is only ever used to display the selected value, transformed as required. The placeholder attribute on the md-select itself it the one to float as this is what describes the content of the select.

[mtraynham]

+1 Select and it's multiple variant, are common form items. It would be nice to have the consistent floating label to match inputs and 100% width. I imagine it could be accomplished by a wrapper div, similar to how the md-input-container interacts with md-input.

[ask007learning]

+1

[sebastiengiroux]

I agree with @hodeyp that "the md-select-label is a great tool to transform the displayed value".

I think that we could achieve the floating label by wrapping the "md-select" within a "md-input-container" (as mentioned by @mtraynham), and still keep the "md-select-label".

[Splaktar]

Good discussion here. We certainly need to have our selects in forms with inputs and they should be able to be side-by-side with a similar look.

[Toilal]

It would be great to also have a way to make an input looking like md-autocomplete, with the clear button on the right, but without actually using the auto complete features.

Or simply make md-autocomplete working when md-items is not defined ... Currently i have to write :

<md-autocomplete md-items='item in []'/>

It could be used for example to filter elements in a list, or others features where an input is used outside of an usual form.

[ask007learning]

When is this enhancement getting released? Any idea ?

[mzbyszynski]

As a temporary workaround to the floating label issue, I was able to get md-select to look similar to an input with a value inside of md-input-container using the master branch by adding this css to my application:

md-input-container > md-select {
  flex: 1;
  order: 2;
  margin: 0;
}

And adding the md-input-has-value class to the md-input-container:

<md-input-container class="md-input-has-value">
  <label>Something</label>
  <md-select>...</md-select>
</md-input-container>

It doesn't perform the animations when a select has no value and I haven't tried integrating ng-messages yet, but this is something anyway.

[mtraynham]

@mzbyszynski Thanks for alluding to that. To expand on your temporary workaround, you could probably ng-class the md-input-has-value which is only enabled when you have a value set. Maybe something like:

<md-input-container ng-class="{'md-input-has-value': foo.bar}">
  <label>Something</label>
  <md-select ng-model="foo.bar">...</md-select>
</md-input-container>

I'm under the impression that md-select could rely on md-input-container as a required parent controller, just as input and textarea do. The main difference here is the existence of md-select-label and if that conflicts with an already existing label.
https://github.com/angular/material/blob/master/src/components/select/demoBasicUsage/index.html#L15

[mtraynham]

Also one thing to point out, the animation is probably unnecessary because the menu pop-up will cover the full length of the form field.

I altered @mzbyszynski's solution to get it working. One unresolved issue, when no value is selected, the md-input-label has to have a value to retain height (with an inserted span). I just set the value to empty.

// less here
md-input-container {
    // largely copied from md-input
    md-select {
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -webkit-order: 2;
        -ms-flex-order: 2;
        order: 2;
        display: block;
        background: none;
        padding: 11px 2px 1px;
        border-width: 0 0 1px 0;
        line-height: 26px;
        -ms-flex-preferred-size: 26px;
        border-radius: 0;
        margin: 0;
    }
    &.md-input-has-value {
        md-select {
            padding: 0px 2px 1px;
        }
    }
}

            <md-input-container ng-class="{'md-input-has-value': user.roles && user.roles.length}">
                <label>Roles</label>
                <md-select multiple ng-model="user.roles" placeholder="Roles">
                    <md-select-label>{{ user.roles.length ? user.roles.join(', ') : '' }}</md-select-label>
                    <md-option ng-value="role" ng-repeat="role in roles">{{ role }}</md-option>
                </md-select>
            </md-input-container>

[pvsilvestrin]

@mzbyszynski I am trying the workaround suggested, but the label is under the md-select. Here a plunker http://plnkr.co/edit/aBdqOHKnbw1tkpcWCusI?p=preview
Could you help me to solve it?

[leeyeh]

Looking forward to a milestone.

[mtraynham]

@pvsilvestrin http://plnkr.co/edit/fqEfSUXWuroNAO0UbA5O?p=preview

You forgot to include the stylesheet. I've made some minor changes:

• Angular 1.3.14
• Angular-Material master
• Added a input field for comparison
• Altered the stylesheet with the suggestions I provided above.

As I mentioned, you need to have the md-select-label return empty values so it keeps the height of the span.

[jadrake75]

I have had issued putting md-selects inside the md-input-containers. The solution I came up with is a simple directive that I put on the wrapping div of the label/md-select that accomplishes the same thing.... I can share if desired.

[chenzhenxi]

+1

[fixko]

+1

[MagicIndustries]

There's a pull request in for this now #3307

[avasanth]

Hi guys. I have one small but severe doubt..
while using
md-input-container
md-select
md-option x /md-option
md-option x /md-option
/md-select
/md-input-container

this works fine...but when i am scrolling and selecting the input it is being gradually displayed on top and it is changing (the selectable box)...please help me.

[avasanth]

I able to fix it by giving height:auto to the body...but we open the md-select in the browser I am able to scroll. but that should not happen right..when we click on it , it shold not allow srolldown and up ...please help

[ilianaza]

+1

[avasanth]

I am new what you mean by +1, are you adding this issue?

[demisx]

@vasanthB5 this means plus one vote to have the issue resolved.

[NeoRyu777]

I understand it to mean "I too am experiencing this issue and would like it fixed if at all possible"

Sent from Yahoo Mail on Android

From:"vasanthB5" notifications@github.com
Date:Mon, Jun 22, 2015 at 10:49 PM
Subject:Re: [material] add floating label to md-select (#1586)

I am new what you mean by +1, are you adding this issue?

—
Reply to this email directly or view it on GitHub.

[ilianaza]

@vasanthB5 Yes, +1 to resolve this issue.

[jmcpeak]

+1

[rschmukler]

@jmcpeak it's on master!

[jmcpeak]

Looks great - thanks

Spoke too soon, it is not lining up properly for me - hmmm

[z3v0k]

+1

[avasanth]

Hi guys..can you please tell me should I download any thing that rschmukler had done..to check whether its working or not?

[avasanth]

or should go with what he had stated to do..

[Ugoku]

Download the latest master and try that. Looks great @rschmukler !

[avasanth]

Can I get the complete min.js / min.css so that I can test it on my side..

[Ugoku]

If you use Bower to get the package (use "master" as version), it will include the minified JS/CSS.

[rschmukler]

Bower is indeed the best way to grab the latest. Big ups to @MagicIndustries for all of his work on this! Thanks again.

[NeoRyu777]

I just installed the master version of angular-material, and I'm having a bit of trouble.

Previously, the <md-select> responded perfectly well to flex, extending the underline all the way across the space allocated by flex. Now it doesn't. What happened? And is there a workaround?

EDIT: I just realized this page might not be the best place to put this question, but as it was working before this change and stopped afterward... If I need to open a new issue about this, please let me know.

[ngraef]

@NeoRyu777 that is a separate issue. #3055, #3167 and a couple others

[NeoRyu777]

@ngraef Thanks, I'll go ahead and put those on my watch list.

[avasanth]

Due to some access restrictions I cannot install node and npm and all....please can anyone tell to get the .min.js/.min.css for this material design updated so that I can just include them and try..:(

[kuhnroyal]

You can get the latest builds here: https://github.com/angular/bower-material

[no-more]

Hi,

In the previous version it was possible to define a custom displayed label. That was useful for multiple select options. Because I don't want the text to enlarge, but instead have a label like : 'selection: 2'.

Is there another way to achieve this with the new implementation?

I have also an issue, I can have the select to fill the space of the input-container.

Thanks a lots it's a great job, I really appreciate the new render.

[Splaktar]

@no-more this issue is closed. You should reference it from a post on the forums for your questions. Someone there should be able to help you with this. It would be great if you could also provide a CodePen or Plunker that demonstrates the issue.

[dholcombe]

I did what @mzbyszynski mentioned on Feb 26. This allows both the code for a select and the rendered page to look very much like a regular input.

[VaibhavSri198925]

I am also facing this problem how to over come of this problem. I used your techniques but when i applied your code into mine then page collapse with each field

[VaibhavSri198925]

What i have to Pass?
To Solve Out this Problem