Feature request: option to change dropdown direction (down [default], up, right, left)

[FelixPriori]

Thank you for your work.

Just wondering if it could be possible to eventually be able to choose the direction of the dropdown.

Thanks again.

[harshzalavadiya]

@FelixPriori I agree this will be a nice feature, I have plans for up/down but I'm not sure about how right/left will work, since up down should cover most cases

[FelixPriori]

@FelixPriori I agree this will be a nice feature, I have plans for up/down but I'm not sure about how right/left will work, since up down should cover most cases

Left/right, I would use mainly within other dropdowns. Might be out of the scope of this project, however.

[muki-fax]

Hi @FelixPriori @harshzalavadiya I have a quick fix:

You can add additional class name to the component, and then you can target 'dropdown-content' class with that custom parent class. For example :

.customClass {
   .dropdown-content {
      top: -1000% !important; // it will display dropdown content above the input element
   }
}

[bnranjith]

Hey @harshzalavadiya greatly appreciate your work . Was facing a issue in setting the height, was finding it difficult to override the height, used !important didn't help.(using it with styled component).

[harshzalavadiya]

@bnranjith sorry, I didn't quiet understand, is this related to this issue? if not then please create new issue with detailed explaination or some screenshot

[DimitarTB]

I would like to add that the dropdown component should expand in automatic direction based on its position inside of the webpage. Example - If the sum of the vertical offset of the dropdown and its height is greater than the page height, it should appear above, else below. I have done this on my own components before and it worked perfectly. I tried implementing this to react-multi-select-component but didnt get good results, maybe the developers can look into it as they are more familiar with the codebase and with CSS then me.

The main reasoning being that in situations where the dropdown is too close to the bottom of the viewport, it goes out of view. Ive had this issue a few times and solved it by adding more margin on the bottom of my form container or moving the select up in my form but that is not a great solution.

[agustints]

Hello, is there any solution currently available?

[harshzalavadiya]

@agustints Not as of now.

But PRs are accepted :)