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.

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

md-select #118

Closed
jelbourn opened this issue Feb 27, 2016 · 75 comments
Closed

md-select #118

jelbourn opened this issue Feb 27, 2016 · 75 comments
Assignees
Labels
feature This issue represents a new feature or feature request rather than a bug or bug fix new component This issue is tracking a new component to be added to the library
Milestone

Comments

@jelbourn
Copy link
Member

Blocked on both #113 and #84

@jelbourn jelbourn added the feature This issue represents a new feature or feature request rather than a bug or bug fix label Feb 27, 2016
@jelbourn jelbourn added this to the before beta milestone Feb 27, 2016
@jelbourn jelbourn changed the title mdSelect md-select Feb 27, 2016
@jelbourn jelbourn added the new component This issue is tracking a new component to be added to the library label Feb 27, 2016
@bhardwaj2607
Copy link

When we can expect a version of select to be available.

@JesusSD
Copy link

JesusSD commented May 24, 2016

Please make a editable md-select!

@maciejtreder
Copy link

Both blockers closed. Can we expect md-select soon?

@henrymana
Copy link

It would be great if md-select and other similar components (menu, dialog, etc) were based on a foundation component such as material 1 md-panel (https://material.angularjs.org/latest/api/service/$mdPanel). Is the team considering this as a design?

@jelbourn jelbourn removed the blocked label Jul 12, 2016
@jelbourn
Copy link
Member Author

@henrymana they are.

@esinek
Copy link
Contributor

esinek commented Aug 9, 2016

@jelbourn when do you anticipate the design doc being ready? It's not yet up in the Design doc directory. Since you'll support multi-select (mentioned here), will you also support searching the list (i.e. filtering down the list) in the case of very large lists - to facilitate finding an item less cumbersome? Also, a check-all/clear for multi-select?

@abalad
Copy link

abalad commented Sep 9, 2016

There is the possibility of being implemented some things this plugin JS? http://selectize.github.io/selectize.js/

@fxck
Copy link
Contributor

fxck commented Sep 17, 2016

@jelbourn @kara could you please answer @esinek's question?

@a5hik
Copy link

a5hik commented Sep 24, 2016

this is an essential component, looking forward to it.

@clust3rsekt0r
Copy link

Hi all congratulations for this project I think is gonna be awesome, but just one thing that I'm seeing here and is the order of components that has been release until now, I think it would better to do things like layouts size, auto-size by device type, and also take care about the most need common form components for example I would be priorize md-select than md-menu or md-tool bar or focus more on md-grid than md-tooltips.

@mesopotamia
Copy link

This project is awesome. I was surprised to find that the select field was so low on the priority list. I'm currently working on a form that requires them. I ended up using materialize-css but I know this is a better solution in the long run.

@kkotak
Copy link

kkotak commented Oct 10, 2016

@mesopotamia - Any pointers on how you integrated materialize-css with A2 material? Aren't there overlaps?

@mesopotamia
Copy link

mesopotamia commented Oct 12, 2016

@kkotak

I ended up using only materialize-css for now and will switch back to material2 when it's ready. However, I can imagine that you can use material 2 and import the select.scss from material 2. Dont forget you will need to also import the js module for adding the functionality.

@kara
Copy link
Contributor

kara commented Nov 1, 2016

Design doc: md-select

@esinek
Copy link
Contributor

esinek commented Nov 1, 2016

@kara thx for the design doc. Looks great! I see the md-select-header will support my previous requests (filtering, check all, uncheck all). I have 3 questions/requests.

  1. You mention the size of the menu will be 5 items. Will there be a way to control that to view more than 5 items?
  2. For very large lists, I've had to add paging to my select list to address performance problems. Do you plan to add something like md-select-footer which could be used to address this?
  3. Will the menu know if it needs to drop up / drop down based on the location of the md-select in the viewport?

@kara
Copy link
Contributor

kara commented Dec 14, 2016

@narkissbv See #2167 and #2124.

@bnatter There isn't a change event on the select; only form directives are supported at this time. If you want to listen to changes, you'll want valueChanges or ngModelChange.

@nicksteenstra
Copy link

@kara Thank you! Are there plans for the md-select to have the change event in the future?

@bnatter
Copy link

bnatter commented Dec 15, 2016

@yosefdishinger, @kara : Thanks for the help.

@hegde5
Copy link

hegde5 commented Dec 16, 2016

@ManishJainGitHubUser Thanks a lot for the syntax!

@uncol
Copy link

uncol commented Dec 17, 2016

Hi,

I create a form for editing. The form contains several 'md-select' which uses the data from the server.
after the main request, I bind (two-way) values with fields in my form, if the data for the option to 'md-select' don't loaded, it field is empty on the screen.

Please, tell me how to correct fill my form.

@uncol
Copy link

uncol commented Dec 18, 2016

Is it correct run all slave requests into ngOnInit, main request start execute into ngAfterViewInit lifecycle?

@narkissbv
Copy link

Couldn't find a reference, so I'm asking here. Any chance to control the height of the <md-select> element? My boss doesn't like to have a scroll unless it's needed (e.g: the list is higher than the viewport).

enclosed a screenshot of our <md-select> element with an inner-scroll we would like to get rid of. There are 3 more items in the list, and the viewport has a lot of room for all of them to fit nicely.
image

@rafaellyra
Copy link

@narkissbv you can custom with css by doing something like:

.md-select-panel {
 max-height: 320px
}

@narkissbv
Copy link

@rafaellyra Kinda hoped for something more sturdy, that will calculate the available height from the top of the <md-select> element, to the bottom of the window (viewport). They already do some positioning magic in that element, so I hoped for a size control as well.

The problem with CSS is that I don't know how many items I will have in each <md-select> element, nor the available height from the top of the element to the bottom of the screen. Those can only be done with JS (or TS with Angular2).

@rafaellyra
Copy link

rafaellyra commented Dec 30, 2016

@narkissbv there is no position change on .md-select-panel itself, just on the overlay, the way it works now is something like: check if it fits from the element to the bottom of the view, in case it's true, position it to the bottom, in case it is false check if it fits from the element to the top of the view in case it's true position it to the top, if both are false position it to the bottom, given that, something like:

.md-select-panel {
 max-height: calc(50vh - 30px); //30px should be the height of the select element
}

should solve your problem of having a scrollbar when there is space on the viewport

@Dunos
Copy link

Dunos commented Jan 2, 2017

How can we change the color of the select text and separator to other theme style, the "color" property does not work neither "dividerColor"

@taokakao
Copy link

taokakao commented Jan 3, 2017

After putting select under input inside the card-content there some positioning issues (see screen).
screen shot 2017-01-03 at 22 36 28

@vivian7169
Copy link

How can I preselected an option? when I tried to use [selected], there is an error.

@joejordanbrown
Copy link
Contributor

@vivian7169 you need to use ngModel on md-select

public itemSelected: number = 2;

<md-select name="items" [(ngModel)]="itemSelected">
    <md-option value="1">item1</md-option>
    <md-option value="2">item2</md-option>
</md-select>

@ajoron
Copy link

ajoron commented Jan 6, 2017

Hello,
Would it be possible to use [ngValue] instead of [value] to bind with a model?
Something like :

<md-select name="items" [(ngModel)]="itemSelected">
     <md-option *ngFor="let poi of pois" [ngValue]="poi">{{poi.name}}
</md-select>

Thanks!

@biiit
Copy link

biiit commented Jan 6, 2017

@alan345 Make sure to import @angular/forms in your module.

import {MaterialModule} from "@angular/material";
import {FormsModule} from '@angular/forms';

@NgModule({
  imports: [MaterialModule.forRoot(), FormsModule]
})

@vivian7169
Copy link

vivian7169 commented Jan 6, 2017 via email

@phmello
Copy link

phmello commented Jan 10, 2017

I think I got a scenario

this.createForm = formBuilder.group({
      fieldName: ['']
 });

and them

<md-select formControlName="fieldName" *ngIf="expression">
     <md-option *ngFor="let option of options" [value]="option.value">
                    {{option.text}}
     </md-option>
</md-select>

When the expression is true and the component is rendered the value is not selected.

@zerouno62
Copy link

zerouno62 commented Jan 10, 2017

I'm using @angular/material@2.0.0-beta.1 and I'm facing the problem that the selection list is always displayed at the bottom of the page. How can I fix that?

Finally I solved the problem by adding a CSS file as discribed in: https://material.angular.io/guide/theming. Since we are working with CLI I did as follows:
If you're using Angular CLI, this is as simple as including one line in your style.css file:
@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css';

@csyperski
Copy link

I'm having an issue with md-select not working with reactive forms, it seems the initial value is not getting set, am I doing something wrong or is this a bug? Here is a plnkr....

https://embed.plnkr.co/p7Fm9lC4TxoVaZ8ydYf0/

@kriswinbush
Copy link

@zerouno62, I had the same problem menu would shoot up to the top left, had to put position:absolute on the .cdk-overlay-pane class. I used a <style> block in index.html, not ideal but solved my issue

@clembu
Copy link

clembu commented Jan 15, 2017

@zerouno62 at least you have a selection list

My md-select doesn't create an overlay, so I'm left with a non-reactive md-select (using 2.0.0-beta.1, and Electron if that's relevant)

Any idea why?

@SalmaKolkari
Copy link

SalmaKolkari commented Jan 16, 2017

Toggling theme not applying for md-select. By default it is applying the light-theme even though we are toggling the theme from light to dark..

@ig16022
Copy link

ig16022 commented Jan 17, 2017

This was asked previously, but there is no answer - ngValue binding doesn't work with md-option, how can we use md-select with objects as option values?

@BhattaRj
Copy link

I am using beta-1 Initial value is not set when data for options are loading form api.

@zerouno62
Copy link

@BhattaRj
If you set the initial value in the model ([(ngModel)]="...") the corresponding option will be selected.

@brunoAltinet
Copy link

brunoAltinet commented Jan 19, 2017

Hello, I have the same problem as @BhattaRj. if I do this:

<select placeholder="Partner" [(ngModel)]="model.partnerGuid"><option *ngFor="let partner of partners" [value]="partner.guid">{{ partner.name }}</option></select>

The value gets preselected according to the binding. If i change it to

<md-select placeholder="Partner" [(ngModel)]="model.partnerGuid">
  <md-option *ngFor="let partner of partners" [value]="partner.guid">
    {{ partner.name }}
  </md-option>
</md-select>

(literally add md- prefix to tags) the value is NOT preselected. That's also when using API for filling options, angualr/material 2.0.0.-beta.1, angular 2.4.3

@jelbourn
Copy link
Member Author

I'm closing this thread since it's gone somewhat off-topic. If you encounter issues with md-select please file an issue following the issue template. For questions / help, try gitter and Stack Overflow.

@angular angular locked and limited conversation to collaborators Jan 19, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feature This issue represents a new feature or feature request rather than a bug or bug fix new component This issue is tracking a new component to be added to the library
Projects
None yet
Development

No branches or pull requests