The "Select your next badge" dialog box is not displaying correctly. It looks like this:

Next badge dialog

Freehand circles, as requested:

freehand circles ftw

It seems to be an issue with box-sizing, because when it's content-box, it looks fine. I think the width and height rules for .popup-badges .all-badge-progress .badge-progress should be increased a little, for example:

.popup-badges .all-badge-progress .badge-progress {
  width: 214px;
  height: 96px;

Tested on the latest Chrome and Firefox on Linux Mint.

  • 2
    Uh, where's the problem? Please edit the image with some freehand circles.
    – M.A.R.
    Commented Feb 18, 2016 at 20:37
  • 3
    Cross-site duplicate: meta.stackoverflow.com/questions/317187/…
    – rene
    Commented Feb 18, 2016 at 20:58
  • 1
    @rene I think it should be asked here, because the bug is on the whole SE network. Commented Feb 18, 2016 at 21:03
  • Another example from PPCG, on latest Chrome on Windows 10: i.imgur.com/WTStKJV.png
    – user307833
    Commented Feb 18, 2016 at 22:52
  • 1
    I'm not saying it shouldn't be asked here. I only link to it so if a dev marks this status-completed they can easily find the other report and tag that as well.
    – rene
    Commented Feb 19, 2016 at 7:35
  • A fix for this will be posted in the next production build.
    – Hynes
    Commented Feb 19, 2016 at 17:09

3 Answers 3


This issue has been resolved. Thank you for your patience.

  • 3
    Patience? 22 hours is really fast for a not-major bug fix. Thanks! Commented Feb 19, 2016 at 19:04

Same answer I gave on metaSO

This is a network bug.

Caused by this line in all.css:

.popup-badges .all-badge-progress .badge-progress` {
  /*...other css*/

, a quick solution/fix would be to set the height to 98px because (at least on SO) the p child has the maximum of 3 lines, so 98px would be enough to have those 3 lines plus some bottom space and the tag-badges would have enough space as well.


I created a userscript to fix this issue temporarily:

// ==UserScript==
// @name         Stack Exchange select badge fix
// @namespace    https://github.com/Gothdo
// @version      1.0
// @description  Fixes the issue described in a Meta.SE post: http://meta.stackexchange.com/q/275844/310998
// @author       Gothdo
// @match         *://stackoverflow.com/*
// @match         *://meta.stackoverflow.com/*
// @match         *://superuser.com/*
// @match         *://meta.superuser.com/*
// @match         *://serverfault.com/*
// @match         *://meta.serverfault.com/*
// @match         *://askubuntu.com/*
// @match         *://meta.askubuntu.com/*
// @match         *://stackapps.com/*
// @match         *://*.stackexchange.com/*
// @grant        none
// ==/UserScript==

$(function() {
    + ".popup-badges .all-badge-progress .badge-progress {\n"
    + "  width: 214px;\n"
    + "  height: 96px;\n"
    + "}\n"
    + "</style>"

You can install it by clicking this link.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .