Make WordPress Core

Opened 12 years ago

Closed 11 years ago

Last modified 11 years ago

#21936 closed defect (bug) (fixed)

.widefat select has a gray background, unlike inputs which are white

Reported by: alexvorn2's profile alexvorn2 Owned by: helen's profile helen
Milestone: 3.6 Priority: normal
Severity: minor Version: 3.4.2
Component: Administration Keywords: has-patch commit
Focuses: ui Cc:

Description

http://wpimpact.com/wp-content/uploads/2012/09/Untitled-2w.png

remove widefat class form select input tags in Widgets...
widefat class makes select element darker, like in Pages widget

Attachments (7)

21936.diff (76.4 KB) - added by MikeHansenMe 11 years ago.
style update.
21936.2.diff (341 bytes) - added by MikeHansenMe 11 years ago.
update to the non min version
21936.3.diff (368 bytes) - added by MikeHansenMe 11 years ago.
background color change
21936.3.min.diff (77.1 KB) - added by MikeHansenMe 11 years ago.
background-color on min file
21936.patch (362 bytes) - added by SergeyBiryukov 11 years ago.
21936.4.diff (689 bytes) - added by MikeHansenMe 11 years ago.
update based on Helen's comment.
21936.5.diff (798 bytes) - added by helen 11 years ago.

Download all attachments as: .zip

Change History (32)

#1 follow-up: @helenyhou
12 years ago

Would it make sense to just make the background for .widefat select elements white? It is for text-type inputs. I never really understood why it was a different color.

#2 @helenyhou
12 years ago

  • Component changed from Widgets to UI

#3 in reply to: ↑ 1 @alexvorn2
12 years ago

Replying to helenyhou:

Would it make sense to just make the background for .widefat select elements white? It is for text-type inputs. I never really understood why it was a different color.

It seems that 'widefat' makes the select input wide, so removing the class is a bad idea, changing the color is a better one... thanks for suggestion!

@MikeHansenMe
11 years ago

style update.

@MikeHansenMe
11 years ago

update to the non min version

#4 @MikeHansenMe
11 years ago

  • Cc mdhansen@… added

#5 @alexvorn2
11 years ago

  • Keywords has-patch added; 2nd-opinion removed

#6 @helenyhou
11 years ago

MikeHansenMe - Perhaps you meant to change the background rather than the border color?

#7 @alexvorn2
11 years ago

  • Keywords needs-patch added; has-patch removed

#8 @MikeHansenMe
11 years ago

Yea, my bad. I will get an update up shortly.

@MikeHansenMe
11 years ago

background color change

@MikeHansenMe
11 years ago

background-color on min file

#9 @MikeHansenMe
11 years ago

  • Keywords has-patch added; needs-patch removed

That should be the correct change.

#10 @helenyhou
11 years ago

You don't need to patch the minified files - a post-commit bot takes care of it. Also, I think it may already have been the right color in this case, but changes in colors-fresh.css often need a parallel change in colors-classic.css (blue).

#11 @MikeHansenMe
11 years ago

I wondered about the min version but figured I would include it anyway. I think the color(f9f9f9) on color fresh is different from the other fields(fff). Color classic seems to match already.

#12 @alexvorn2
11 years ago

so is this good for 3.6 milestone? I thought that at 3.5 update this will be fixed :(

#13 @helenyhou
11 years ago

  • Summary changed from remove widefat class from widgets to .widefat select has a gray background, unlike inputs which are white

Have to figure out why it was that color in the first place before we can just change it.

#14 @MikeHansenMe
11 years ago

.widefat is used on the import page to style the table.

Maybe there should be another rule "select.widefat" just as there is a "textarea.widefat" or possible even a new class to use on input/select/textarea to reduce css. I think the original reason for this being used was just to get width: 100%;

Last edited 11 years ago by MikeHansenMe (previous) (diff)

#15 @MikeHansenMe
11 years ago

  • Keywords has-patch removed

#16 @SergeyBiryukov
11 years ago

  • Component changed from UI to Widgets
  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 3.6

#17 @MikeHansenMe
11 years ago

Patch works, no unwanted side effects.

Version 0, edited 11 years ago by MikeHansenMe (next)

#18 @helen
11 years ago

  • Keywords ui-focus added

.widefat has the background color defined in the color CSS files, with textarea.widefat getting the background color treatment to override. I would suggest either putting the select.widefat rule there, or to change the .widefat declaration for border and background colors to table.widefat.

#19 @alexvorn2
11 years ago

+1 for table.widefat

#20 @helen
11 years ago

My suggestion requiring testing for consequences, of course :)

@MikeHansenMe
11 years ago

update based on Helen's comment.

@helen
11 years ago

#21 @helen
11 years ago

21936.5.diff removes what would be an unnecessary rule for textarea.widefat. I tested around the admin and don't see any detrimental effects. The tag cloud widget has a select.widefat, for an existing example.

#22 @MikeHansenMe
11 years ago

Nice, the text widget did use textarea.widefat but is now taking the width 100% from .widefat and background of #fff from the default textarea css rule. So it looks correct.

#23 @SergeyBiryukov
11 years ago

  • Keywords commit added

#24 @helen
11 years ago

  • Owner set to helen
  • Resolution set to fixed
  • Status changed from new to closed

In 23315:

Make sure .widefat border and background coloring only applies to tables. props MikeHansenMe. fixes #21936.

#25 @helen
11 years ago

  • Component changed from Widgets to Administration
Note: See TracTickets for help on using tickets.