Make WordPress Core

Opened 10 years ago

Closed 7 weeks 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 10 years ago.
Image_after_saving.jpg (17.5 KB) - added by pavelevap 10 years ago.
27914.shorter-string.png (19.5 KB) - added by SergeyBiryukov 10 years ago.
27914.diff (585 bytes) - added by joedolson 5 months ago.
saved.png (481.0 KB) - added by antpb 5 months ago.
27914.2.diff (813 bytes) - added by joedolson 2 months ago.
Updated patch
Screenshot 2024-06-05 at 10.21.47 AM.png (140.5 KB) - added by antpb 7 weeks ago.
Confirmed latest patch working
27914.3.diff (842 bytes) - added by joedolson 7 weeks 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
10 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
10 years ago

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

#3 @pavelevap
10 years ago

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

#4 @SergeyBiryukov
10 years ago

  • Version changed from 3.9 to 3.5

#5 @SergeyBiryukov
10 years ago

  • Focuses ui added

#6 @chriscct7
9 years ago

  • Keywords needs-patch added

#7 @mrpritchett
8 years ago

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

#8 @joedolson
9 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.


5 months ago

@joedolson
5 months ago

#10 @joedolson
5 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
5 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.


5 months ago

#13 @antpb
5 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
5 months ago

#14 @shailu25
5 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 5 months ago by shailu25 (previous) (diff)

#15 @swissspidy
5 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
5 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
2 months ago

Updated patch

#17 @joedolson
2 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
2 months ago

  • Keywords needs-refresh removed

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


8 weeks ago

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


7 weeks ago

@antpb
7 weeks ago

Confirmed latest patch working

#21 @antpb
7 weeks ago

  • Keywords needs-testing removed

#22 @joedolson
7 weeks ago

  • Keywords commit added

@joedolson
7 weeks ago

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

#23 @joedolson
7 weeks 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.