WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#30658 closed defect (bug) (fixed)

Search bar too wide on plugin search results

Reported by: johnbillion Owned by: azaozz
Milestone: 4.1 Priority: normal
Severity: normal Version: 4.1
Component: Plugins Keywords: has-patch commit
Focuses: ui, administration Cc:

Description

r30740 made the search input in the filter toolbar 100% width. This has broken the search form layout when performing a search on the Plugins -> Add New screen.

Attachments (8)

Screen Shot 2014-12-10 at 10.36.34.png (18.1 KB) - added by johnbillion 6 years ago.
30658.patch (334 bytes) - added by desaiuditd 6 years ago.
Adding CSS Fix for #30658
Screenshot from 2014-12-10 19:30:31.png (5.5 KB) - added by desaiuditd 6 years ago.
1px additional margin
30658.1.patch (802 bytes) - added by desaiuditd 6 years ago.
Added changes in common-rtl.css as well & Line Height adjusted
30658.diff (658 bytes) - added by helen 6 years ago.
30658.2.diff (3.2 KB) - added by helen 6 years ago.
30658.3.diff (5.6 KB) - added by azaozz 6 years ago.
common.patch (323 bytes) - added by eliorivero 6 years ago.
Changes height in .wp-filter .search-form select rule from 33 to 32 pixels.

Download all attachments as: .zip

Change History (26)

@desaiuditd
6 years ago

Adding CSS Fix for #30658

@desaiuditd
6 years ago

1px additional margin

#1 @desaiuditd
6 years ago

  • Keywords has-patch dev-feedback added; needs-patch removed

Removing 100% width fixes the issue, but it slightly misplaces with adjacent select box. Though changing this would create ripples for Add New Theme and Media Gallery pages.

@desaiuditd
6 years ago

Added changes in common-rtl.css as well & Line Height adjusted

@helen
6 years ago

#2 @helen
6 years ago

  • Keywords dev-feedback removed

I think width and max-width were reversed, I also noticed that the positioning changes cause unwanted overlap. See 30658.diff for those fixes, plus the extra margin noted.

@helen
6 years ago

@azaozz
6 years ago

#3 @azaozz
6 years ago

  • Keywords needs-testing added

30658.3.diff builds on 30658.2.diff, also fixes the .media-toolbar-primary and .media-toolbar-secondary in the media modal.

#4 @helen
6 years ago

  • Keywords commit added; needs-testing removed

Looks good.

#5 @azaozz
6 years ago

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

In 30813:

Fix the search field width in the media modal, media library grid and on the install new plugins screen. Props helen, fixes #30658.

#6 @nacin
6 years ago

In 30816:

Fix the search field width in the media modal, media library grid and on the install new plugins screen.

Merges [30813] to the 4.1 branch.

props helen.
fixes #30658.

#7 @justingreerbbi
6 years ago

I am still seeing a minor issue still after checking RC1. The search box and dropdown stair step lower than the menu.

To Replicate:

  • Search for a plugin
  • Resize window to smallest and then scale back to normal

I can confirm on Latest Chrome and FF on OS X.

http://i.imgur.com/kkJNsX7.png

Last edited 6 years ago by justingreerbbi (previous) (diff)

#8 @SergeyBiryukov
6 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

This ticket was mentioned in Slack in #forums by justingreerbbi. View the logs.


6 years ago

This ticket was mentioned in Slack in #forums by justingreerbbi. View the logs.


6 years ago

#11 @azaozz
6 years ago

Don't see this happening in Firefox 34.0/Win7. Setting the search-form to display: inline-block; seems to fix this in Chrome 39.0.2171.95/Win7.

Version 0, edited 6 years ago by azaozz (next)

#12 @azaozz
6 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 30830:

Fix search box position on the Add Plugins screen after resizing the window to narrower than 1000px and then back to wider than 1200px. Fixes #30658.

#13 @azaozz
6 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopen for 4.1.

#14 @eliorivero
6 years ago

Issue is still visible as the image below shows, in Chrome and Firefox on Win 7.

https://s3.amazonaws.com/f.cl.ly/items/3x1s3Y2E321p0w032i3Q/alignment.png

Added patch for common.css that solves this.

@eliorivero
6 years ago

Changes height in .wp-filter .search-form select rule from 33 to 32 pixels.

This ticket was mentioned in Slack in #core by johnbillion. View the logs.


6 years ago

#16 @johnbillion
6 years ago

I have no idea why [30830] works, but it does.

#17 @johnbillion
6 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 30878:

Fix search box position on the Add Plugins screen after resizing the window to narrower than 1000px and then back to wider than 1200px.

Merges [30830] to the 4.1 branch.

Fixes #30658.

#18 @nacin
6 years ago

[30813] caused a minor, goofy, UI regression: #30725.

Note: See TracTickets for help on using tickets.