# Box style category dropdown on Chrome always forces scrollbar

**URL:** https://meta.discourse.org/t/box-style-category-dropdown-on-chrome-always-forces-scrollbar/40309
**Category:** UX
**Created:** [February 29, 2016, 2:09am UTC](https://meta.discourse.org/t/box-style-category-dropdown-on-chrome-always-forces-scrollbar/40309 "2016-02-29T02:09:49Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [February 29, 2016, 2:09am UTC](https://meta.discourse.org/t/box-style-category-dropdown-on-chrome-always-forces-scrollbar/40309/1 "2016-02-29T02:09:49Z")

</div>

When the box-style category badge is used, it always forces a scrollbar in the category dropdown menu when using the latest Chrome browser. With Firefox .cat div is pushed down, producing a gap between categories, but it doesn’t force a scrollbar. With Safari and iOS it displays properly (no gap between categories and no scrollbar.)

It seems to have something to do with the line-height. The css for making the badge is kind of complicated.

 ![](https://global.discourse-cdn.com/meta/original/3X/5/e/5e7d57146d103c6252b34410e644c4fe4db2c455.png)

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [February 29, 2016, 4:36am UTC](https://meta.discourse.org/t/box-style-category-dropdown-on-chrome-always-forces-scrollbar/40309/2 "2016-02-29T04:36:16Z")

</div>

Thanks to Stack Overflow:

> <https://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward/9289377#9289377>

Here’s what’s causing the problem:

> The baseline of an ‘inline-block’ is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its ‘overflow’ property has a computed value other than ‘visible’, in which case the baseline is the bottom margin edge.

Changing .badge-wrapper.box span from `overflow: hidden;` to `overflow: visible;` fixes it.

Edit: Setting `vertical-align: text-top` on the `.category-dropdown-menu badge-wrapper.box` link accomplishes the same thing, but would allow you to set a max-width on the category name span and have the name truncated with ellipsis. (there’s currently no max-width on the menu’s box-style category span.)