Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Select adds height to card body in Chrome

See original GitHub issue

When hovering over a select that is placed in a card’s card-header then the height of the corresponding card-body increases. The problem only occurs in my Chrome browser in version 62.0.3202.94. The problem does not occur in Firefox 58.0b8 (64-Bit). I’m running Windows 10 and I’m using bootstrap v4 beta2 as you can see in the attached codepen. slider

I’ve added an example to codepen: https://codepen.io/seveves/pen/XzQXYP?editors=1000

Issue Analytics

State:
Created 6 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

3reactions

Johann-Scommented, Dec 6, 2017

we can at least add it to our wall of browser bugs

0reactions

mdocommented, Jul 13, 2019

Closing this out since it’s an old issue, not a Bootstrap bug, and the .custom-select has been heavily redone in v5 so that it shouldn’t impact things here.

Top Results From Across the Web

Heights rendering differently in Chrome and Firefox [duplicate]

When working with flexbox, Chrome and Safari resolve percentage heights on flex items based on the value of the parent's height property.

height - CSS: Cascading Style Sheets - MDN Web Docs

The height CSS property specifies the height of an element. By default, the property defines the height of the content area.

Setting Height And Width On Images Is Important Again

To prevent layout shifts and improve performance scores, we need to always set width and height attributes on our images.

CSS features reference - Chrome Developers

# Copy CSS · Select an element. · In the Elements > Styles pane, right-click a CSS property. Copy CSS drop-down menu. ·...

Cards - Bootstrap

alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card ... are added and placed next to each other by adding .card-link to an <a> tag....