3

The newly re-designed Stack Exchange blog search results page displays the results by sorting them in its "Relevance" (by default). These results can also be sorted/filtered by using the "Date" option. But, due to the current overlap issue there is no way one can tell if there is any option at all. Let me illustrate this by sharing some screenshots.

Try searching for "Joel Spolsky" (or whatever you prefer) in the SE's blog search box (located on the right side panel). Pay attention to the top right side of the search results page where you will see the "Sort by: " label. Here is the screenshot of the same:

enter image description here

In the above screenshot, the "Relevance" option is slightly overflowed (marked in Red circle) outside the gray color outlined option box. But, if you look very carefully, you can see the drop-down arrow overlapped on the letter "n" (marked in Blue circle). Just out of curiosity, I clicked on it to see what other option is available to choose from, and here is what I get:

enter image description here

The "Sort by:" drop-down select box does offers a "Date" option to choose besides the "Relevance". Upon selecting the "Date" option, the page was refreshed with new results sorted by date as expected. But, notice how the drop-down option box looks now:

enter image description here

You can see the drop-down arrow right next to the "Date" option which clearly gives an indication to the user that a options list is available for the selection and/or the current filter applied to the search results shown on the page. Whereas, in case of "Relevance" option due to the width of it, the drop-down arrow got overlapped.

Upon doing inspect element I found out the CSS code and the property that was causing this issue. Here is the relevant code:

.gsc-selected-option-container {
.
.
/* width: 50px!important; */
.
.
}

All I had to do is uncheck (comment out) the width property, and here's what it looks like now:

enter image description here

See the difference. The "Relevance" option now perfectly fits into the select box along with the drop-down arrow on the right side. The drop-down arrows are definitely universal and IMO displaying arrow would make it more intuitive for users. Please fix this overlap issue at the earliest. Also, though commenting out width property solved the issue but it might have other drawing implications somewhere else. I didn't experiment much. I would leave this to SE's UI/UX team for further experiment.

Please share your thoughts, ideas or any suggestions.

P.S.

I can reproduce this on the three browsers i.e. Chrome (Version 43.0.2357.134 (64-bit)), Firefox (Version 39.0) and Safari (Version 8.0.7 (10600.7.12)) -- MacBook Pro (Retina, Late 2013; OS X Yosemite Version 10.10.2)

You must log in to answer this question.

Browse other questions tagged .