New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 736551 link

Starred by 2 users

Issue metadata

Status: Archived
Owner: ----
Closed: Dec 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 2
Type: ----



Sign in to add a comment

Checkboxes changed alignment when checked vs unchecked

Project Member Reported by zhangtiff@chromium.org, Jun 24 2017

Issue description

I remember encountering this bug when I first tried to make the CSS checkbox styles. 

I originally fixed this by making sure the text content of the checkbox existed even when the checkbox was unchecked. The check was hidden by being the same color as the background color of the checkbox. 

But that caused problems on Chrome OS because the font colors of the checks did not properly change. So now the alignment issue is back. 
 
Cc: b...@chromium.org
Bevc@, if you are interested in playing with CSS some, this bug is small but probably a little tricky to fix. Replications steps:

1. Go to: https://sheriff-o-matic.appspot.com/test-expectations 
2. Click any of the "Edit" buttons on the right side of the screen. 
3. Try checking and unchecking any of the checkboxes. Note that their alignment changes when checked vs. unchecked. 

The checkboxes on Sheriff-o-Matic are currently styled using pseudoelements that contain checkbox characters. This is because you can't really style checkboxes in CSS by default, so it's a bit of a hack (the checkbox display is actually a pseudoelement that changes its appearance when its parent checkbox is checked or unchecked). 

I haven't looked into this bug enough to know why this position change is happening, but it is interesting that it happens on the test expectations editing modal but not on any other checkboxes on the site. I think this is probably related to the fact that the checkbox is display is positioned using flexbox. 
The file you'd want to modify for this is som-input-styles, which contains the CSS for checkboxes (and other things): https://cs.chromium.org/chromium/infra/go/src/infra/appengine/sheriff-o-matic/frontend/elements/som-input-styles.html 

For reference, this is also the template where you see the unaligned checkbox:  https://cs.chromium.org/chromium/infra/go/src/infra/appengine/sheriff-o-matic/frontend/elements/som-test-expectations/som-edit-expectation-form.html

It's possible that you could solve this bug more quickly by adjusting the way the checkboxes are displayed on this form though editing the checkboxes themselves is preferable, so that the checkboxes don't work differently depending on how they're displayed. 
Status: Archived (was: Untriaged)

Sign in to add a comment