WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 4 days ago

#41648 reviewing defect (bug)

Alignment issue on media-new.php when browse uploader screen is active

Reported by: krupajnanda Owned by: SergeyBiryukov
Milestone: 5.6 Priority: low
Severity: minor Version: 4.8.1
Component: Media Keywords: good-first-bug needs-refresh has-patch
Focuses: ui, css, administration Cc:

Description

While adding any media from browse upload screen, the message it shows when the file is uploaded or not, that isn't aligned properly with the button.

Steps:

  1. Goto /wp-admin/media-new.php page.
  2. Switch to browse uploader
  3. Check here

Please check attachment 1 and 2 for the same.

Attachments (9)

browser uploader - When file is not attached.png (25.2 KB) - added by krupajnanda 3 years ago.
browser uploader - When file is attached.png (25.3 KB) - added by krupajnanda 3 years ago.
expectd output.png (3.3 KB) - added by krupajnanda 3 years ago.
It should look something like as shown in expected output.png file
41648.diff (411 bytes) - added by andraganescu 20 months ago.
CSS fixing the text alignment for the upload input
41648.png (128.8 KB) - added by samful 5 months ago.
41648.size-13px.diff (397 bytes) - added by sabernhardt 3 months ago.
adjusts #async-upload file input's font size to 13px, with or without JavaScript enabled
41648.size-1em.diff (396 bytes) - added by sabernhardt 3 months ago.
option with 1em instead of 13px (the paragraph is already set to 13px font size)
mac-safari-before-patch.png (33.3 KB) - added by andystitt829 6 weeks ago.
Mac Safari alignment before patch
mac-safari-after-patch.png (34.3 KB) - added by andystitt829 6 weeks ago.
Mac Safari alignment after patch

Download all attachments as: .zip

Change History (28)

@krupajnanda
3 years ago

It should look something like as shown in expected output.png file

This ticket was mentioned in Slack in #core-media by mike. View the logs.


20 months ago

#2 @mikeschroder
20 months ago

  • Keywords needs-patch good-first-bug added
  • Milestone changed from Awaiting Review to Future Release
  • Priority changed from normal to low
  • Severity changed from normal to minor

Thanks so much for the report, and sorry it's taken so long for a response.

Because this is an older upload method, I'm lowering the priority on the ticket, but would be happy to merge/commit a fix if it's available.

Related: #41024

#3 @aaroncampbell
20 months ago

I'm not much of a CSS expert, so I'm sure what the real fix is here. But when playing with this as part of a bug scrub today I did notice that getting rid of the font-size:14px that’s applied to input, select, textarea in wp-admin/css/forms.css seems to line it up right (shrinking the font to 13px in the process for me?).

It’s like the font in the input it affected by that but not the font in the button, but I don't know what other areas of wp-admin this would affect.

#4 follow-up: @lucagrandicelli
20 months ago

Hi @krupajnanda, used browser?

#5 in reply to: ↑ 4 @krupajnanda
20 months ago

Replying to lucagrandicelli:

Hi @krupajnanda, used browser?

This was checked on Chrome, Firefox and Safari browsers for MAC OS

@andraganescu
20 months ago

CSS fixing the text alignment for the upload input

#6 follow-up: @andraganescu
20 months ago

  • Keywords has-patch added; needs-patch removed

I've added a small patch that should fix the misalignment here

https://core.trac.wordpress.org/attachment/ticket/41648/41648.diff

#7 in reply to: ↑ 6 @krupajnanda
20 months ago

Replying to andraganescu:

I've added a small patch that should fix the misalignment here

https://core.trac.wordpress.org/attachment/ticket/41648/41648.diff

Thank you

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


7 months ago

#9 @SergeyBiryukov
7 months ago

  • Milestone changed from Future Release to 5.5
  • Owner set to SergeyBiryukov
  • Status changed from new to reviewing

#10 @samful
5 months ago

  • Focuses css added

This patch was mentioned in Slack and is marked as possible "Blockers For Releases" so I had a look into this using Linux Chromuim and Firefox, and a MacBookPro with lastest MacOS Safari and Chrome. The issue only occurred for me on the Mac.

I believe the code has been changed slightly since this ticket was opened and the current fix didn't work for me, so I used this code:

#html-upload-ui #async-upload{
    font-size: 13px;
}

It will need to go in the src/wp-admin/css/media.min.css for you to test it.

See my Screenshot for a side by side comparison of before and after:

@samful
5 months ago

#11 @samful
5 months ago

  • Keywords needs-refresh needs-testing added

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


3 months ago

@sabernhardt
3 months ago

adjusts #async-upload file input's font size to 13px, with or without JavaScript enabled

@sabernhardt
3 months ago

option with 1em instead of 13px (the paragraph is already set to 13px font size)

#13 @sabernhardt
3 months ago

  • Keywords needs-refresh removed

In 41648.size-13px.diff, the CSS selector is changed to #html-upload-ui #async-upload so it affects the file input with or without JavaScript.

Before and after the patch, alignment was fine in Windows browsers (Chrome, Firefox, Edge-Chromium, IE11, Vivaldi). Of course, the patch still needs testing in at least MacOS.

I also get the same results with a value of 1em instead of 13px, so that option is available, too. (If unsure about the 1em option, go with 13px.)

#14 @SergeyBiryukov
2 months ago

  • Milestone changed from 5.5 to 5.6

The patch looks simple enough, but I didn't have a chance to test in on a Mac yet, and would like to tackle #41024 at the same time. Moving to 5.6 for now.

@andystitt829
6 weeks ago

Mac Safari alignment before patch

@andystitt829
6 weeks ago

Mac Safari alignment after patch

#15 @andystitt829
6 weeks ago

Tested this on Mac. Alignment before and after the patch looked fine in Firefox and Chrome. In Safari, the alignment looks like it might have a little too much bottom padding. It's the same result both before and after the patch. Not sure if it's worth tweaking or if it looks fine as it is.

This ticket was mentioned in Slack in #core-css by kirstyburgoine. View the logs.


5 weeks ago

This ticket was mentioned in Slack in #core-css by kirstyburgoine. View the logs.


4 days ago

#18 @kburgoine
4 days ago

  • Keywords needs-refresh added; has-patch needs-testing removed

#19 @kburgoine
4 days ago

  • Keywords has-patch added
Note: See TracTickets for help on using tickets.