WordPress.org

Make WordPress Core

Opened 22 months ago

Closed 18 months ago

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

Download all attachments as: .zip

Change History (32)

comment:1 follow-up: helenyhou22 months 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 helenyhou22 months ago

  • Component changed from Widgets to UI

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

MikeHansenMe22 months ago

style update.

MikeHansenMe22 months ago

update to the non min version

comment:4 MikeHansenMe22 months ago

  • Cc mdhansen@… added

comment:5 alexvorn222 months ago

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

comment:6 helenyhou22 months ago

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

comment:7 alexvorn222 months ago

  • Keywords needs-patch added; has-patch removed

comment:8 MikeHansenMe22 months ago

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

MikeHansenMe22 months ago

background color change

MikeHansenMe22 months ago

background-color on min file

comment:9 MikeHansenMe22 months ago

  • Keywords has-patch added; needs-patch removed

That should be the correct change.

comment:10 helenyhou22 months 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 MikeHansenMe22 months 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 alexvorn219 months ago

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

comment:13 helenyhou19 months 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 MikeHansenMe19 months 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 19 months ago by MikeHansenMe (previous) (diff)

comment:15 MikeHansenMe19 months ago

  • Keywords has-patch removed

SergeyBiryukov19 months ago

comment:16 SergeyBiryukov19 months ago

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

comment:17 MikeHansenMe19 months 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 19 months ago by MikeHansenMe (previous) (diff)

comment:18 helen19 months 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 alexvorn219 months ago

+1 for table.widefat

comment:20 helen19 months ago

My suggestion requiring testing for consequences, of course :)

MikeHansenMe19 months ago

update based on Helen's comment.

helen19 months ago

comment:21 helen19 months 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 MikeHansenMe19 months 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 SergeyBiryukov18 months ago

  • Keywords commit added

comment:24 helen18 months 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 helen18 months ago

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