Make WordPress Core

Opened 11 years ago

Closed 8 months ago

#27914 closed defect (bug) (fixed)

Information about image is jumping in media modal

Reported by: pavelevap's profile pavelevap Owned by: joedolson's profile joedolson
Milestone: 6.6 Priority: normal
Severity: normal Version: 3.5
Component: Media Keywords: has-patch commit
Focuses: ui Cc:

Description

When changing title or caption, changes are saved automatically, but information about image is jumping and it is very distracting. It is caused by "Saved." message which is displayed for a sec. See attached screenshots.

Attachments (8)

Image_saved.jpg (18.3 KB) - added by pavelevap 11 years ago.
Image_after_saving.jpg (17.5 KB) - added by pavelevap 11 years ago.
27914.shorter-string.png (19.5 KB) - added by SergeyBiryukov 11 years ago.
27914.diff (585 bytes) - added by joedolson 12 months ago.
saved.png (481.0 KB) - added by antpb 12 months ago.
27914.2.diff (813 bytes) - added by joedolson 9 months ago.
Updated patch
Screenshot 2024-06-05 at 10.21.47 AM.png (140.5 KB) - added by antpb 8 months ago.
Confirmed latest patch working
27914.3.diff (842 bytes) - added by joedolson 8 months ago.
Updated patch. Isolates the grid layout to only this heading, to avoid impacting other headings.

Download all attachments as: .zip

Change History (31)

#1 @SergeyBiryukov
11 years ago

Confirmed. This is caused by a long translated string in the header: "Podrobné informace o souboru".

Doesn't happen with a shorter string: 27914.shorter-string.png.

#2 @nacin
11 years ago

I don't think this is a regression in 3.9 and likely dates to 3.5.

#3 @pavelevap
11 years ago

Yes, you are right, I tested 3.5.1 and there is the same problem.

#4 @SergeyBiryukov
11 years ago

  • Version changed from 3.9 to 3.5

#5 @SergeyBiryukov
11 years ago

  • Focuses ui added

#6 @chriscct7
9 years ago

  • Keywords needs-patch added

#7 @mrpritchett
9 years ago

Testing this on trunk and submitting a patch if it is still an issue.

#8 @joedolson
16 months ago

  • Milestone set to 6.5
  • Owner set to joedolson
  • Status changed from new to accepted

This is still an issue today; but this should be easily resolved.

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


12 months ago

@joedolson
12 months ago

#10 @joedolson
12 months ago

Patch changes the heading to display: grid so the whole area has a defined space. Long headings will wrap, but if there's any page shift (due to a long translation for 'Saved.'), it'll be significantly more subtle.

#11 @shailu25
12 months ago

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

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


12 months ago

#13 @antpb
12 months ago

Just echoing what was discussed in the Media Meeting where we reviewed the patch here. It seems that the grid is being respected on my local but still jumping around when the attachment details h2 content is just long enough to not have enough space for the "save" message.

One option mentioned is maybe having a reserved static height area below the h2 for the save message to prevent jumping around. I'm not completely confident that is the right thing to do but it definitely solves the problem more simply.

@antpb
12 months ago

#14 @shailu25
12 months ago

Test Report

Patch Tested: https://core.trac.wordpress.org/attachment/ticket/27914/27914.diff

Environment:

WordPress - 6.5-beta2-57703
OS - Windows
Browser - Chrome
Theme: Twenty Twenty-Four
PHP - 8.1.23
Active Plugin - Test Reports

Actual Results:

  • Patch is not working.❌ (Jumping issue is still occurs in Modal)

Attachment:

Last edited 12 months ago by shailu25 (previous) (diff)

#15 @swissspidy
12 months ago

  • Keywords needs-refresh added

Since the patch needs more work, are you confident this can be resolved before 6.5 RC 1? This looks like a punt candidate.

#16 @joedolson
12 months ago

  • Milestone changed from 6.5 to 6.6

I think it makes more sense to punt this for 6.6. It could get finished, but...on the whole, I'd rather not stress myself out over it.

@joedolson
9 months ago

Updated patch

#17 @joedolson
9 months ago

This patch provides a little more space for the 'Saved.' text, but also compensates for the loading spinner by positioning it absolutely. Part of what was causing the text shift was that the loading spinner takes up space even when invisible, and the brief window when both the loading spinner and the 'Saved.' confirmation were visible caused the amount of space needed to be greater than the length of either item individually.

#18 @joedolson
9 months ago

  • Keywords needs-refresh removed

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


9 months ago

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


8 months ago

@antpb
8 months ago

Confirmed latest patch working

#21 @antpb
8 months ago

  • Keywords needs-testing removed

#22 @joedolson
8 months ago

  • Keywords commit added

@joedolson
8 months ago

Updated patch. Isolates the grid layout to only this heading, to avoid impacting other headings.

#23 @joedolson
8 months ago

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

In 58352:

Media: Prevent shifting on details update in media modal.

Fix issue where the image details would shift position during AJAX updates in the media modal. Occurred when the Attachment Details heading was translated into a language where the text no longer alowed space for the 'Saved' message to the right of the message.

Props pavelevap, SergeyBiryukov, antpb, joedolson, shailu25.
Fixes #27914.

Note: See TracTickets for help on using tickets.