Chrome Select/Dropdown Control Missing Borders - Latest Chrome (69.0.3497), Windows 10

Question

We are using the latest Chrome, and Windows 10,

69.0.3497.100 (Official Build) (32-bit) 

On some monitors, there is a Select/Dropdown control that is missing borders. Sometimes it's the right one; then when I play with width (make it px rather than percent, add more width) it becomes the bottom one.

But on other monitors, this Select/Dropdown is always fine. It always has all the borders. There is never any problem.

All the monitors are Resolution 1920 x 1200 (Recommended in Windows 10), both the ones that have and don't have this problem. Tested with different zooms - 100%, 80%, 120%. Either some users have this problem (always), or they don't (ever), all with the same browser, at any zoom level.

There is no special CSS styling on the control. In fact, even if I were to add a border: 1px solid it wouldn't affect the system choice area. It would only affect the top-level box.

The closest I could find was that there was a bug in Chrome a long time ago, like 2012, but it's long been fixed, so we can't use this info.

Chrome isn't displaying borders (sometimes)

Any thoughts?

Answer 1

Adding another wrapper div helped me to solve this issue.

<div class="dropdown-menu-container">     <div class="dropdown-menu">         // items     </div> </div> 

I added border to dropdown-menu-container and added overflow-y: auto property to dropdown-menu class.

This solved my issue. Hope this helps.