Problem/Motivation

We are using Media 7.x-2.0-alpha4 with Navbar 7.x-1.6 and jQuery Update 1.8. It works with normal Drupal jQuery (1.4.4) but not with 1.8+.

When using a media field to add an image the media browser opens up as expected but if the Navbar is docked to the left, vertically, then the browser is hidden behind the Navbar. I have gone through all the related issues as well as #2272567: Media dialog appears underneath the Ctools modal dialog when using jQuery UI 1.10. However, I don't think that this is the issue and I just think that the Media browser should adjust its dimensions to fit in the space between the Navbar and the right browser scroll bar.

Proposed resolution

The browser should adjust it's dimensions to fit in the space between the Navbar and the right browser scroll bar.

Remaining tasks

User interface changes

API changes

CommentFileSizeAuthor
#8 2497253-media-overlay-behind-navbar.patch334 bytesElijah Lynn
#2 Selection_334.png60 KBElijah Lynn
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Elijah Lynn’s picture

Elijah Lynn
Location Portland, Oregon
CreditAttribution: Elijah Lynn at NBCUniversal commented
Related issues: +#2272567: Media dialog appears underneath the Ctools modal dialog when using jQuery UI 1.10
Elijah Lynn’s picture

Elijah Lynn
Location Portland, Oregon
CreditAttribution: Elijah Lynn at NBCUniversal commented
Issue summary: View changes
FileSize
Selection_334.png60 KB
Elijah Lynn’s picture

Elijah Lynn
Location Portland, Oregon
CreditAttribution: Elijah Lynn at NBCUniversal commented
Related issues: +#2066779: Navbar breaks media browser

I am wondering if this should be a Navbar issue...

At any rate, here is a related (but maybe not) issue with Navbar that I am going to crosslink for now.

#2066779: Navbar breaks media browser

Elijah Lynn’s picture

Elijah Lynn
Location Portland, Oregon
CreditAttribution: Elijah Lynn at NBCUniversal commented
Issue summary: View changes
Elijah Lynn’s picture

Elijah Lynn
Location Portland, Oregon
CreditAttribution: Elijah Lynn at NBCUniversal commented
Issue summary: View changes
Elijah Lynn’s picture

Elijah Lynn
Location Portland, Oregon
CreditAttribution: Elijah Lynn at NBCUniversal commented
Title: Media overlay not recognizing vertical Navbar » Media overlay not recognizing vertical Navbar w/jQuery update 1.8+
Issue summary: View changes

Added note that this only happens with jQuery 1.8.

Elijah Lynn’s picture

Elijah Lynn
Location Portland, Oregon
CreditAttribution: Elijah Lynn at NBCUniversal commented
Project: D7 Media » Navbar
Version: 7.x-2.0-alpha4 » 7.x-1.x-dev
Component: Media Browser » Code

Okay, this appears to actually be because of the jQuery Stacking that was introduced in jQuery UI 1.10+. I now believe this is a Navbar issue so I am moving this issue to the Navbar issue queue.

https://api.jqueryui.com/theming/stacking-elements/

Elijah Lynn’s picture

Elijah Lynn
Location Portland, Oregon
CreditAttribution: Elijah Lynn at NBCUniversal commented
Project: Navbar » Ember
Status: Active » Needs review
FileSize
2497253-media-overlay-behind-navbar.patch334 bytes

Turns out this is actually because Ember replaces the media.css file with it's own (seems problematic to maintain) and loses the .ui-front z-index property. It appears there is much more to 'backport' into the Ember media.css but here is a patch for just this one issue.

I am also not sure this is the precise way to fix this issue (Google jQuery stacking) but this is a pragmatic approach for now.