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:
However, when I click in it and start typing, it looks like this:
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.
nothing is selected, only placeholder text is in the dropdowns
search value is typed in the first dropdown
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:
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.
That’s ok @Eduardo, I will try to explain it differently, thanks for sticking with me and this little game
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
But maybe it is just me who can see it in the search of perfection.
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).
I realized that I had picked wrong example . 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.
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.
I need new glasses 
who can see it in the search of perfection.
. 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.
