Make WordPress Core

Opened 11 years ago

Closed 10 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 11 years ago.
Screen Shot 2014-06-08 at 3.52.05 PM.png (30.7 KB) - added by ramiabraham 10 years ago.
Screenshot of newly-added break-word and width setting
media-views.diff (407 bytes) - added by ramiabraham 10 years ago.
add break-word to .name class, set max-width for data-setting="alt"
media-views--rev.diff (387 bytes) - added by ramiabraham 10 years ago.
Removes the [data-setting="alt"] attribute.

Download all attachments as: .zip

Change History (13)

#1 @helen
11 years ago

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

I believe this is all intentional.

#2 @pavelevap
11 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
11 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 11 years ago by SergeyBiryukov (previous) (diff)

#4 @alexvorn2
11 years ago

I think this is by design

#5 @ericlewis
10 years ago

  • Focuses ui added
  • Keywords needs-patch added

10 years ago

Screenshot of newly-added break-word and width setting

10 years ago

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

#6 @ramiabraham
10 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
10 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.

10 years ago

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

#8 @wonderboymusic
10 years ago

  • Milestone changed from Awaiting Review to 4.1

#9 @johnbillion
10 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.