Dash Dropdown size change

Hello,
I would like to find out how to properly change the size of the dcc.Dropdown component. I changed the formatting of the dropdown component and it now looks like this:
dropdown closed

However, when I click in it and start typing, it looks like this:
dropdown open

The bottom left corner is not rounded anymore and the text is not centered in the visible part of the dropdown (even the bottom of the cursor is not visible)

It seems to me, that the height of that part of the dropdown which accepts text input is not resized to height of 24px but it still has the size of 34px with 10 px not visible.

I cannot find out what other element or property should I change to make it appear ā€œnormalā€. I assume that the height of ā€œsomethingā€ should be changed to 24 px, but I just canĀ“t figure out what it is. I explored the dropdown element in my browser and tried to change or add the height property to every css selector that seemed at least a bit related to the Dropdown, but nothing helped.

Can you please help?

Hi @Martinm

I canā€™t see in the image what is the problem you mentioned. :thinking:
Could you explain a little bit?

Hi @Eduardo

thanks for the swift reply.

My problem is this, please look at this picture
modified

It shows three states of my dropdowns:

  1. nothing is selected, only placeholder text is in the dropdowns
  2. search value is typed in the first dropdown
  3. option is selected in the first dropdown.

In the first and the third state, the text is vertically centered inside the dropdown. But in the second one, the text is not vertically centered, it is slightly shifted to the bottom of the dropdown.

This is how it looks like with default settings:
original

This time all three states display the text vertically centered. And thatā€™s what I am trying to achieve, to have the search value in the middle of the dropdown (like the placeholder text and selected option).

It is not a big issue, but I would like to have the app visually pleasing, and I believe that there is a simple way to do it, I just canĀ“t figure it out.

Sorry @Martinm I donā€™t see any difference :woozy_face: I need new glasses :eyeglasses:

I feel Iā€™m playing ā€œdiscover the 5 differenceā€ :joy::joy:

Thatā€™s ok @Eduardo, I will try to explain it differently, thanks for sticking with me and this little game :slight_smile:

Please, look at the word ā€œkeramoā€ in the first image. There is almost no padding between this word and the bottom border of the dropdown and there is ā€œhugeā€ padding between this word and the top border of the dropdown.

Now, look at the word ā€œkeramā€ in the second image. The padding between this word and the bottom border of the dropdown is the same as the padding between this word and the top border of the dropdown (as is the case with any other text in any other dropdown in both images, except the one with the word ā€œkeramoā€).

And thatā€™s the visual defect that is causing me headaches :slight_smile:
But maybe it is just me :face_with_monocle: who can see it in the search of perfection.

Now I see :nerd_face:
I always loose in that play :woozy_face:

You are such a perfectionist :joy:

Perhaps itā€™s possible to manage from the css file, I do not know what is the appropriate css option (VirtualizedSelectFocused or something like that).

See if this link can help you.

Great, so it is not just me, who sees it :slight_smile:

I realized that I had picked wrong example :man_facepalming:. In the ā€œkeramoā€ word, all letters sit neatly on one line, but when I tested with words containing letters j, g, p or y, the problem becomes quite obvious with bottom of those letters hidden.
image

I agree that it must be just some minor tweak in the css file, I had tried to change everything which seemed at least a little bit related to dropdown before I posted here, but I will do that again during weekend, maybe I will even start all over with new css file to rule out potential conflicts between existing css selectors.

If I find a solution, I will post it here. If not, I will just adjust the height of the dropdown, so the text will be at least visible.

Anyway, thanks for help :slight_smile:

Found it! :crazy_face:

The key to success was inside this CSS selector:

.Select-input>input {
background:none;
border:0;
box-shadow:none;
display:inline-block;
font-family:inherit;
font-size:inherit;
margin:0;
line-height:14px;
padding:8px 0 12px;
-webkit-appearance:none
}

I had to change the padding to something more reasonable (in my case it was 3px for top padding).

1 Like