Fix alignment of select boxes

RESOLVED WONTFIX

Status

P1
normal
RESOLVED WONTFIX
a year ago
5 days ago

People

(Reporter: dylan, Assigned: kohei)

Tracking

Production
Dependency tree / graph

Details

Attachments

(7 attachments, 4 obsolete attachments)

(Reporter)

Description

a year ago
Smaug reported that the Mozilla Skin has a glitch in the height of select and input items which is particularly notable when setting review flags. This is partly due to padding added to input items (which I think is unattractive anyway), and different font sizes.
(Reporter)

Comment 1

a year ago
Created attachment 8869300 [details] [diff] [review]
1366143_1.patch
(Reporter)

Comment 2

a year ago
Pushing this change up to dev for a review across browsers. I think it looks better in all browsers on OSX and Windows, but not better in Linux. I think possibly we might want to use a CSS reset but that is probably more work. :-/
(Reporter)

Updated

a year ago
Attachment #8869300 - Flags: review?(glob)
(Reporter)

Comment 3

a year ago
After a lot of looking, I think it's better on linux. It's just not perfect there.
Comment on attachment 8869300 [details] [diff] [review]
1366143_1.patch

Review of attachment 8869300 [details] [diff] [review]:
-----------------------------------------------------------------

if you're asking if i think it looks better, my answer is no.
i think because of the styling (box-shadow, border-radius, etc) there is a need for extra padding, and it looks way too tight without it.

2px padding is the smallest value where it feels right to me.
will attach comparison screenshots.
Created attachment 8871149 [details]
padding-current.png
Created attachment 8871152 [details]
padding-2.png

oops, padding-2 didn't have box-shadows.
Attachment #8871150 - Attachment is obsolete: true
(Reporter)

Comment 9

a year ago
Created attachment 8871258 [details]
details_page.png

The padding is problematic when trying to make select and input boxes the same height. The real issue is the different font sizes.
(Reporter)

Updated

a year ago
Summary: Fix height of select boxes and text fields → Fix alignment of select boxes
(Reporter)

Comment 10

a year ago
Created attachment 8871421 [details] [diff] [review]
1366143_8.patch

The focus of this patch is alignment, so I have not shrunk the size of inputs. I have enlarged the padding on select elements and changed their box-sizing and font-size to be consistent (the existing CSS inconsistently styles select and select[multiple]. The biggest change is 
the removal of vertical-align: top
Attachment #8869300 - Attachment is obsolete: true
Attachment #8869300 - Flags: review?(glob)
Attachment #8871421 - Flags: review?(glob)
(Reporter)

Comment 11

a year ago
Created attachment 8885791 [details] [review]
PR
Attachment #8871421 - Attachment is obsolete: true
Attachment #8871421 - Flags: review?(glob)
(Assignee)

Comment 12

a year ago
Created attachment 8885953 [details]
screenshot w/ appearance:none technique, advanced search page

So as mentioned in the PR, I tried the CSS appearance:none solution. Tested with various browsers including Firefox, Firefox ESR, Chrome, Safari, IE, Edge on Windows, macOS, Ubuntu and it all looks good. Attaching a screenshot on Firefox. PR coming shortly.
Assignee: dylan → kohei.yoshino
Status: NEW → ASSIGNED
(Assignee)

Comment 14

a year ago
Created attachment 8885961 [details]
screenshot w/ appearance:none technique, bug detail page
(Assignee)

Updated

a year ago
Attachment #8885953 - Attachment description: screenshot w/ appearance:none technique → screenshot w/ appearance:none technique, advanced search page
(Reporter)

Updated

a year ago
Attachment #8885791 - Attachment is obsolete: true
(Assignee)

Comment 15

a year ago
The long term solution I believe is using custom elements (Bug 889230) to provide a better, consistent UX. For example, the product and component dropdown list should have a filtering option like GitHub issue's reviewer/assignee selector. Firefox will be implementing this natively (Bug 1309935) but other browsers don't have it for now.
(Assignee)

Updated

a year ago
Blocks: 1380277
(Reporter)

Updated

a year ago
Attachment #8885956 - Flags: review+
(Reporter)

Comment 16

a year ago
This is a clear improvement in most cases.
Status: ASSIGNED → RESOLVED
Last Resolved: a year ago
Resolution: --- → FIXED
(Reporter)

Updated

a year ago
Blocks: 1386238
(Reporter)

Comment 17

a year ago
This caused breakage on enter_bug.cgi (and some others)
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
(Assignee)

Comment 18

10 months ago
I'm bulk-closing the remaining Sandstone skin bugs. Sandstone is no longer Mozilla's default style, and I'll be creating a new style guide for Bugzilla soon in Bug 1377977.
Status: REOPENED → RESOLVED
Last Resolved: a year ago10 months ago
Resolution: --- → WONTFIX

Updated

5 days ago
Product: bugzilla.mozilla.org → bugzilla.mozilla.org Graveyard
You need to log in before you can comment on or make changes to this bug.