Make WordPress Core

Opened 10 years ago

Closed 8 years ago

#23003 closed defect (bug) (fixed)

Long filename breaks styling in media modal

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


Long filename in media modal breaks styling of right sidebar. Long filename is displayed bellow thumbnail and longer labels bellow are moved to separate line.

See attached picture.

Attachments (4)

Long_filename.jpg (29.3 KB) - added by pavelevap 10 years ago.
Screen Shot 2014-06-08 at 3.52.05 PM.png (30.7 KB) - added by ramiabraham 9 years ago.
Screenshot of newly-added break-word and width setting
media-views.diff (407 bytes) - added by ramiabraham 9 years ago.
add break-word to .name class, set max-width for data-setting="alt"
media-views--rev.diff (387 bytes) - added by ramiabraham 9 years ago.
Removes the [data-setting="alt"] attribute.

Download all attachments as: .zip

Change History (13)

#1 @helen
10 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed

I believe this is all intentional.

#2 @pavelevap
10 years ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

I do not think so. I probably described it a little messy. Yes, filename is bellow thumbnail (no problem), but why "Alt Text" field is bellow Alt Text label (localized) when it works well if filename is shorter?

#3 @SergeyBiryukov
10 years ago

  • Milestone set to Awaiting Review

The image on the right has smaller width, probably due to a scroll bar not shown in the screenshot.

Wrapping the text in the left column would probably look better than shifting the inputs down.

Last edited 10 years ago by SergeyBiryukov (previous) (diff)

#4 @alexvorn2
10 years ago

I think this is by design

#5 @ericlewis
9 years ago

  • Focuses ui added
  • Keywords needs-patch added

9 years ago

Screenshot of newly-added break-word and width setting

9 years ago

add break-word to .name class, set max-width for data-setting="alt"

#6 @ramiabraham
9 years ago

  • Keywords has-patch added; needs-patch removed

Added word-wrap: break-word to
.media-sidebar .setting .name and specified a max-width for .setting[data-setting="alt"] .name

The min-width: 30%; is retained for .media-sidebar .setting .name, as a flexible width is needed for some elements.

#7 @ramiabraham
9 years ago

Actually, the span class .name is not present in .media-sidebar .setting when there's also an input[type="checkbox"] (as a sibling of the span), so the [data-setting="alt"] attribute can be removed, which will allow the word-wrap to affect all classes within .media-sidebar .setting.

9 years ago

Removes the [data-setting="alt"] attribute.

#8 @wonderboymusic
8 years ago

  • Milestone changed from Awaiting Review to 4.1

#9 @johnbillion
8 years ago

  • Owner set to johnbillion
  • Resolution set to fixed
  • Status changed from reopened to closed

In 30359:

Correctly wrap the text in long input labels in the media manager.

Fixes #23003
Props ramiabraham

Note: See TracTickets for help on using tickets.