WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#21936 closed defect (bug) (fixed)

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

Reported by: alexvorn2 Owned by: 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 3 years ago.
style update.
21936.2.diff (341 bytes) - added by MikeHansenMe 3 years ago.
update to the non min version
21936.3.diff (368 bytes) - added by MikeHansenMe 3 years ago.
background color change
21936.3.min.diff (77.1 KB) - added by MikeHansenMe 3 years ago.
background-color on min file
21936.patch (362 bytes) - added by SergeyBiryukov 3 years ago.
21936.4.diff (689 bytes) - added by MikeHansenMe 3 years ago.
update based on Helen's comment.
21936.5.diff (798 bytes) - added by helen 3 years ago.

Download all attachments as: .zip

Change History (32)

comment:1 follow-up: @helenyhou3 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.

comment:2 @helenyhou3 years ago

  • Component changed from Widgets to UI

comment:3 in reply to: ↑ 1 @alexvorn23 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!

@MikeHansenMe3 years ago

style update.

@MikeHansenMe3 years ago

update to the non min version

comment:4 @MikeHansenMe3 years ago

  • Cc mdhansen@… added

comment:5 @alexvorn23 years ago

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

comment:6 @helenyhou3 years ago

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

comment:7 @alexvorn23 years ago

  • Keywords needs-patch added; has-patch removed

comment:8 @MikeHansenMe3 years ago

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

@MikeHansenMe3 years ago

background color change

@MikeHansenMe3 years ago

background-color on min file

comment:9 @MikeHansenMe3 years ago

  • Keywords has-patch added; needs-patch removed

That should be the correct change.

comment:10 @helenyhou3 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).

comment:11 @MikeHansenMe3 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.

comment:12 @alexvorn23 years ago

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

comment:13 @helenyhou3 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.

comment:14 @MikeHansenMe3 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 3 years ago by MikeHansenMe (previous) (diff)

comment:15 @MikeHansenMe3 years ago

  • Keywords has-patch removed

@SergeyBiryukov3 years ago

comment:16 @SergeyBiryukov3 years ago

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

comment:17 @MikeHansenMe3 years ago

Patch works, no unwanted side effects.

Update: did not work, I must have had another patch active. Reverted, tested again. being overwritten by CSS (my bad, need coffee).

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

comment:18 @helen3 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.

comment:19 @alexvorn23 years ago

+1 for table.widefat

comment:20 @helen3 years ago

My suggestion requiring testing for consequences, of course :)

@MikeHansenMe3 years ago

update based on Helen's comment.

@helen3 years ago

comment:21 @helen3 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.

comment:22 @MikeHansenMe3 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.

comment:23 @SergeyBiryukov3 years ago

  • Keywords commit added

comment:24 @helen3 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.

comment:25 @helen3 years ago

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