I have tried reducing the height on a dcc.dropdown. While this seems to change the height of the container, the dropdown element stays the same height and simply overlaps the container.
Is there a way to set or get the height of a dcc.dropdown element?
I would ultimately like to place a text container of the same height next to the dropdown menu.
Thanks for your reply! Extending the size of the dropdown actually works as you mentioned. experimented a bit more and it seems that I cannot reduce the height below ~35px. I also tried setting min-height to 0px which doesnât have an effect.
I think you should watch out for the combinations of CSS attributes that you are using. Some might cancel others, and sometimes their interactions produce different results. I think itâs best to try them in isolation and see what works.
I just tried to reduce height to 5px and it seems to work:
The space after âstopwordsâ is actually a dropdown, and has a height of 5px. The space after âSeparatorâ is a and âInputâ field with default height.
The dropdown actually works and displays the options when clicked, but itâs obviously a terrible user experience:
Hm I donât see whatâs going on. When I run the below code, the dropdown is not resizing. There is assets directory. So I do not see any further CSS being injected.
Applying âdisplyâ: âinline-blockâ directly to the dropdown style has an effect for me. The wrapper does not change anything. I am a bit concerned about the side-effects of setting inline-block on the dropdown and would love to understand what is going on. But anyway, thanks for the workaround!
@eliasdabbas, Iâm also having a simmilar issue. I followed your instructions, but when I change the âheightâ style property, my dropdowns donât change size and they end up overlapping. Do you know what is going on in my case?