I need to customize a md-select so that the option list acts more like a traditional select. The options should show up below the select element instead of hovering over top of the element. Does anyone know of something like this that exists, or how to accomplish this?
So this turned out to be something I had to do with Javascript and setTimeout, as ugly as the solution is. You can't effectively do this with CSS only as material design uses javascript positioning of the drop down. As a result I had to attach a function to the popup opening inside there I set a 200ms timeout that calculates the desired position of the drop down on the screen and moves it there. I also attached a function in the controller to a window resize event so it will move with a resize.
Ultimately you have to use a timeout to get material design time to do it's javascript based move of the popover and then move it yourself. I also uses a trick to hide it while the moving is taking place so the user doesn't see the jump. That's the description of what I had to do just in case someone else attempts similar.
