The Search for a badge... INPUT field on the Select your next badge screen causes a styling glitch if the Available All Gold Silver Bronze text is bold, as in Ask Patents (see related post on Ask Patents Meta).

Style problem

The above screenshot illustrates the problem. The background DIV does not cover the entire scrolling DIV, so the bottom of the scrolling pane (and scrollbar) extend beyond the white background.

The problem (as described in that post) is triggered by the following custom style (carried over from the original design for the site):

.subtabs a.youarehere, .filter a.youarehere {
    font-weight: 700;

Now, we could remove the custom style from Ask Patents, but I think this is more of a problem with a non-responsive layout for the filtering div or INPUT element (I can trigger this problem on most other StackExchange sites simply by changing the font-style and/or font-weight of that selector).


3 Answers 3


Solution 2: Switch the styles to a responsive design using table-*.

I also tested the approach described in this post, which provides a more responsive layout. I tested with Firefox only, although the browser support for the table-* attributes is really good. These are the changes that I made (green lines indicate new styles, crossed-out indicate removed styles):

filter styles

filter-tabs styles

search styles

In this case, it is not necessary to adjust the width of the search INPUT; it stays at 600px.


Solution 1: Change the following width from 600px to 590px.

The easiest solution is to reduce the width property of the search INPUT element to 590px site-wide to accommodate more flexibility when styling the fonts on that screen:


.popup-badges .filtering .search input[type="text"] {
    width: 600px; /* change this to 590px */
    display: block;
    margin: 0px 8px 0px 0px;

This may be the easiest quick fix, but there are better solutions out there that do not specify a width for this component at all.


I agree as well.

Instead of changing the px to 590, the user could even make it to equal the value that can fit the longest possible badge name to prevent this issue all together. A clean nice fun box that looks totally legit and normal is usually a input box that does not reach across that long unless you expect an overflow. So short and simple can win. Shown with 400px:

enter image description here

The point is that the smaller box will become a great size to not reproduce the bug and be user-friendly. The input box is still big enough for the longest badge name (and a lot more chars!)

You must log in to answer this question.

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