WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 10 months ago

Last modified 10 months ago

#41648 closed defect (bug) (fixed)

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

Reported by: krupajnanda Owned by: antpb
Milestone: 5.6 Priority: low
Severity: minor Version: 4.8.1
Component: Media Keywords: good-first-bug has-patch commit
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 (10)

browser uploader - When file is not attached.png (25.2 KB) - added by krupajnanda 4 years ago.
browser uploader - When file is attached.png (25.3 KB) - added by krupajnanda 4 years ago.
expectd output.png (3.3 KB) - added by krupajnanda 4 years ago.
It should look something like as shown in expected output.png file
41648.diff (411 bytes) - added by andraganescu 3 years ago.
CSS fixing the text alignment for the upload input
41648.png (128.8 KB) - added by samful 16 months ago.
41648.size-13px.diff (397 bytes) - added by sabernhardt 15 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 15 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 13 months ago.
Mac Safari alignment before patch
mac-safari-after-patch.png (34.3 KB) - added by andystitt829 13 months ago.
Mac Safari alignment after patch
Screen Shot 2020-11-09 at 5.10.23 PM.png (212.2 KB) - added by antpb 10 months ago.
Safari after patch (November)

Download all attachments as: .zip

Change History (41)

@krupajnanda
4 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.


3 years ago

#2 @mikeschroder
3 years 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
3 years 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
3 years ago

Hi @krupajnanda, used browser?

#5 in reply to: ↑ 4 @krupajnanda
3 years ago

Replying to lucagrandicelli:

Hi @krupajnanda, used browser?

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

@andraganescu
3 years ago

CSS fixing the text alignment for the upload input

#6 follow-up: @andraganescu
3 years 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
3 years 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.


19 months ago

#9 @SergeyBiryukov
19 months ago

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

#10 @samful
16 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
16 months ago

#11 @samful
16 months ago

  • Keywords needs-refresh needs-testing added

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


15 months ago

@sabernhardt
15 months ago

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

@sabernhardt
15 months ago

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

#13 @sabernhardt
15 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
14 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
13 months ago

Mac Safari alignment before patch

@andystitt829
13 months ago

Mac Safari alignment after patch

#15 @andystitt829
13 months 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.


13 months ago

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


12 months ago

#18 @kburgoine
12 months ago

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

#19 @kburgoine
12 months ago

  • Keywords has-patch added

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


11 months ago

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


11 months ago

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


11 months ago

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


11 months ago

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


11 months ago

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


11 months ago

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


10 months ago

@antpb
10 months ago

Safari after patch (November)

#27 @antpb
10 months ago

  • Keywords commit added; needs-refresh removed
  • Owner changed from SergeyBiryukov to antpb
  • Status changed from reviewing to accepted

Above is a screenshot from Safari on MacOS. I think it looks pretty good and consistent with what I'm seeing in Firefox and Chrome. Going to commit this for 5.6 Beta 4, and if we think Safari needs further tweaks, we can open a specific ticket on it.

The above is the 1em option. I'm testing with the 13px option to see which has he best experience across all browsers. The 1em looks great in my opinion.

Last edited 10 months ago by antpb (previous) (diff)

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


10 months ago

#29 @antpb
10 months ago

My rule is if it looks identical, go with em :D

This looks good in my testing.

#30 @antpb
10 months ago

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

In 49553:

Media: Adjusts alignment of file name text in browser uploader.

Sets a defined size for text alongside the media browser uploader button fixing alignment on popular browsers.

Props krupajnanda, mikeschroder, aaroncampbell, lucagrandicelli, andraganescu, samful, sabernhardt, andystitt829, kburgoine.
Fixes #41648

#31 @antpb
10 months ago

In 49555:

Media: Removes duplicate alignment fix for browser uploader.

See #41648

Note: See TracTickets for help on using tickets.