WordPress.org

Make WordPress Core

#42244 closed defect (bug) (fixed)

Audio widget overflows sidebar container element

Reported by: alexvorn2 Owned by: westonruter
Milestone: 4.9 Priority: normal
Severity: normal Version: 4.9
Component: Widgets Keywords: needs-patch
Focuses: Cc:

Description

I have it in a sidebar in the Twenty Fifteen, and it looks to looong, maybe other themes have the same problem.

How to replicate:

  1. Activate Twenty Fifteen theme
  2. Add Audio widget to the sidebar
  3. Add a song and view the page.

Attachments (5)

audio-widget-problem.png (106.2 KB) - added by alexvorn2 20 months ago.
You can see how Audio Widget looks into the Twenty Fifteen theme
42244.0.diff (380 bytes) - added by westonruter 20 months ago.
wp-audio-container.png (26.5 KB) - added by westonruter 20 months ago.
audio-widget-in-4.8.2.png (24.6 KB) - added by westonruter 20 months ago.
42244.1.diff (530 bytes) - added by bradyvercher 20 months ago.

Download all attachments as: .zip

Change History (14)

@alexvorn2
20 months ago

You can see how Audio Widget looks into the Twenty Fifteen theme

#1 @alexvorn2
20 months ago

I tested other bundled themes, I can see a problem only on this theme (Twenty Fifteen).

#2 @melchoyce
20 months ago

  • Component changed from Widgets to Bundled Theme

#3 @westonruter
20 months ago

@bradyvercher @rafa8626 Would this be a back-compat problem? (Ref. #42189)

See also #42203.

#4 @bradyvercher
20 months ago

@westonruter I'm not sure if that's a back-compat issue, but the JS sizing in MediaElement has always been a bit wonky. Taking a cue from [41838], I think adding max-width: 100% to the .mejs-container rules at the top of wp-mediaelement.css should take care of this.

#5 @westonruter
20 months ago

It does seem to be a regression. The audio player looks fine in 4.8.2.

In 4.8.2, I see the .mejs-container element has width:100% whereas in trunk it has width: 412.641px; and min-width: 227px;.

Adding a max-width is not helping here because unlike wp_video_shortcode() which outputs the video wrapper elements statically (the div.wp-video), the wp_audio_shortcode() wraps the audio element dynamically in JS. So the max-width gets added to the audio element which is not shown anyway.

#6 @westonruter
20 months ago

  • Milestone changed from Awaiting Review to 4.9

Simply adding a div.wp-audio to wrap around the audio element seems to fix the overflow problem (for some reason). See wp-audio-container.png. The player, however, doesn't seem to display optimally in this small size. See audio-widget-in-4.8.2.png for how the Audio widget looks in 4.8.2.

#7 @westonruter
20 months ago

  • Component changed from Bundled Theme to Widgets
  • Keywords needs-patch added
  • Summary changed from Audio Widget looks weird to Audio widget overflows sidebar container element

@rafa8626 Is this something you can look into?

#8 @bradyvercher
20 months ago

@westonruter 42244.1.diff is what I was suggesting. I wouldn't recommend adding an extra div to solve this.

#9 @westonruter
20 months ago

  • Owner set to westonruter
  • Resolution set to fixed
  • Status changed from new to closed

In 41886:

Widgets: Prevent MediaElement.js player from overflowing sidebar in Audio widget.

Props bradyvercher.
See #39686.
Fixes #42244.

Note: See TracTickets for help on using tickets.