Make WordPress Core

Opened 9 years ago

Closed 9 years ago

#30773 closed defect (bug) (fixed)

Plugin information modal: banner repeats when scrollable

Reported by: senff's profile senff Owned by: helen's profile helen
Milestone: 4.2 Priority: normal
Severity: normal Version: 4.0
Component: Plugins Keywords: has-patch commit
Focuses: ui, administration Cc:


For scrollable modals, the bottom of the header banner has 6 pixels repeating vertically.

When the plugin information modal has a scrollbar, the (inner) width of the modal decreases a bit. The title banner, sized 772x250, will then be resized (for example to 755x244 on Chrome on Windows). Result is that the banner is not high enough to fill the header area which has a fixed height, and will repeat at the bottom (see attached).

Suggested patch gives the banner background:cover so that the image will be evenly placed/sized in the header.

Attachments (3)

plugin-banner.jpg (107.0 KB) - added by senff 9 years ago.
Example of banner repeating
30773.diff (797 bytes) - added by senff 9 years ago.
Suggested patch
30773-1.diff (420 bytes) - added by valendesigns 9 years ago.

Download all attachments as: .zip

Change History (14)

9 years ago

Example of banner repeating

9 years ago

Suggested patch

#1 @senff
9 years ago

  • Type changed from enhancement to defect (bug)

#2 @nacin
9 years ago

  • Milestone changed from Awaiting Review to 4.2
  • Version changed from trunk to 4.0

cc @stephdau

9 years ago

#3 @valendesigns
9 years ago

  • Keywords has-patch added

I've refreshed the patch so it can be applied cleanly. As well, I was able to reproduce the bug in Opera on OSX and can confirm this does fix it.


#4 @tellyworth
9 years ago

Tested in Chrome on OSX - the latest patch works for me.

The bug doesn't occur normally in Yosemite because of its invisible scrollbars, but you can reproduce by changing System Prefs / General / Show Scroll Bars to Always.

#5 @senff
9 years ago

Sorry, I don't see immediate differences between my patch and the one by @valendesigns, can someone explain?

(Just for my future reference)


#6 @valendesigns
9 years ago

@senff You are correct, there are not any real code differences between the patches, except that yours will not apply cleanly for two reasons. The first, common-rtl.css is a dynamically created file that is built during the grunt command with cssjanus and therefore should not be directly edited. The second, you did not create your patch from the project root.

#7 @senff
9 years ago

First part makes perfect sense, thanks!

Not sure about the second part though -- or better, not sure how I should have done that (a previous patch I made for another ticket I did it the same way and that was accepted). Or is that just different from one SVN tool to the other? - Using TortoiseSVN on Windows -

#8 @valendesigns
9 years ago

It may have been accepted, but they would have had to cd into the directory that the file is in to apply the patch. Which is extra work for the committers.

You will need to be in the root directory of your WordPress SVN checkout. The directory structure in that folder looks like:


In that folder, right-click and select SVN Create Patch from the TortoiseSVN context menu.

Once the patch is created and saved, you should see the proper path at the top of the file.

Index: src/wp-admin/css/common.css
--- src/wp-admin/css/common.css        (revision XXXXX)
+++ src/wp-admin/css/common.css        (working copy)

Hopefully that clears it up for you.


Last edited 9 years ago by valendesigns (previous) (diff)

#9 @senff
9 years ago

That makes perfect sense. Will do it like that next time. Thanks!

#10 @SergeyBiryukov
9 years ago

  • Keywords commit added

#11 @helen
9 years ago

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

In 31719:

Plugin details: Ensure banner image doesn't repeat.

props senff, valendesigns.
fixes #30773.

Note: See TracTickets for help on using tickets.