25

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.

enter image description here

enter image description here

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?

Improve this question
4
  • 4
    Observed the same issue in Chrome v74 on Windows 10 when Scale and Layout Windows setting is set to 125%, however looks good at 100%. Chrome zoom set to 100%
    – Ignas
    Commented May 3, 2019 at 15:25
  • 1
    Reducing my monitor resolution from 2560x1440 with 125% scaling to 2048x1152 with 100% scaling made the problem go away. it seems like 125% scaling is causing the issue.
    – Mike Olund
    Commented Jul 17, 2019 at 23:14
  • This just started happening for me, and I noticed that .form-control class uses calc() for height, and if I change it to height:auto; everything is good.
    – John Dover
    Commented Mar 11, 2020 at 17:22
  • Just add a pixel padding around it and it should work. stackoverflow.com/questions/12547580/…
    – Sushil Kumar
    Commented Apr 16, 2020 at 12:18

5 Answers 5

Reset to default
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.

Improve this answer
0

Check to see if a parent div of the drop-down control lacks an "overflow:visible" CSS attribute. Per you image examples, constraints of the parent div appear to be cutting off the drop-down when displayed.

Also, consider using Chrome's Inspect function to analyze this issue. In Chrome, right-click on the drop-down, then select Inspect. You can also make CSS updates specific to your browser with Inspect to see how this changes the appearance. Once it looks good, you can go back and update the applicable files accordingly.

Improve this answer
0

I know it's late, but I've just recently encountered this bug, and was able to fix it by adjusting the font-size of <option> elements. Try fiddling around the font-size until you can no longer see the issue, this is how I fixed it.

Improve this answer
0

Apparently the issue occurs while trying to set padding or width on the select element.

Improve this answer
-1

adjust #dropdown { overflow-y:auto;}

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.