select/dropDown problem: full (?) height for the dropdown by default

[Augustin82]

The big picture of what I'm trying to do

Use a select with a dropdown.

What I did

The following Ellie: https://ellie-app.com/cVxGzYRWBa1/5

What I Expected To Happen

I expected to have a default, normal, simple, bland-looking select =)

What Actually Happened

The default size for the "dropdown" fills the entire screen and pushes the options "below the fold".

*: Interestingly, it seems that this version of the Ellie does not suffer from issue #107. Could it be that it's the sizing of the dropdown that causes problems?

**: Also interestingly, and also unlike issue #107, this is NOT happening on Firefox (the select is of a standard size). However, on Firefox, issue #107 is occurring on that Ellie.

Versions

• Elm: 0.18
• style-elements: 4.2.0
• Browser: Chrome Version 62.0.3202.62 (Official Build) (64-bit)
• Operating System: Ubuntu 16.04.3 LTS 64-bit

[eniac314]

I am having some problems too with the select menus done with Element.Input.dropMenu and Element.Input.search

In Firefox when I put two select fields one on top of the other in a column the dropdown menu from the top one is obscured by the select field from the bottom one (seems like a z-index problem). Moreover, I can't find a way to get rid of the ugly dotted outline that frames the dropMenu. It takes the whole container width, no matter the width of the input field.

Curiously using : focus [ prop "outline" "none"] seems to work only for Element.Input.search but not for Element.Input.dropMenu

Chrome seems to be even worse. I am seeing the full height issue you mentioned. A running example is visible here: https://ellie-app.com/fSGnCmdB3a1/1, it is adapted from the form example on the github page.