Hey,

Thanks for back-porting this from D8.

I am doing some prototyping using the entity_embed module, which now uses the Dialog API module. I just installed Views and I found that the dialogs in Views are all transparent.

I found a few bug reports that mention jquery.ui.theme.css. I notice that with Dialog that CSS file seems to be removed when using the Seven theme. This happens in dialog_library_alter. I found that I was able to get Views dialogs working if I comment out

unset($libraries['ui']['css'][$path]); (in dialog_library_alter)

I also noticed that if I added this piece of CSS to themes/seven/css/components/jquery.ui/theme.css it also resolved the transparency issue

.ui-dialog {
background: #fff;
}

I am assuming neither of these are good enough solutions, but I thought it might help someone who understand this module more resolve it.

This was the bug that got me onto the idea of the jquery.ui.theme.css file https://www.drupal.org/node/1473306
thanks.

CommentFileSizeAuthor
#11 views-ui-2535222-11.patch657 bytesdevin carlson
#10 fix-transparent-background.patch737 bytesrogerpfaff
#2 views-background-2535222-2.patch1023 bytesdevin carlson

Comments

david.czinege’s picture

david.czinege commented

I have the same problem. Thanks for the solutions.

devin carlson’s picture

devin carlson commented
Status: Active » Needs review
StatusFileSize
new views-background-2535222-2.patch1023 bytes

The default dialog styling doesn't included a background color for the dialog's content so the Seven theme declares its own in dialog.theme.css. However, this styling is only added to the page when a dialog is present which means it isn't loaded for Views modals since they use ctools modals.

I think "reverting" to a white background by default for .ui-dialog is a good approach.

devin carlson’s picture

devin carlson commented
Status: Needs review » Fixed

Tested #2 and committed to Dialog 7.x-2.x.

  • Devin Carlson committed c9c3901 on 
    Issue #2535222 by Devin Carlson: Dialog causing transparent background...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

mstrelan’s picture

mstrelan commented

This was overridden and the background is transparent again.

rogerpfaff’s picture

rogerpfaff
he/his
Primary language German
Location Munich
commented

In which version of Dialog is this not broken? I got a site with working background color and installed the dev version of dialog. Got the transparent background, downgraded to alpha7 -> transparent background. Downgraded to alpha6 -> transparent background.

I truncated all cache tables in the database -> transparent background. How do I get rid of this? Or better: How do I get my lovely white background back?

rogerpfaff’s picture

rogerpfaff
he/his
Primary language German
Location Munich
commented
Status: Closed (fixed) » Active

Re-Opening because the error is back

mstrelan’s picture

mstrelan commented

In which version of Dialog is this not broken?

I believe there may have been a specific dev release where this was fixed for a few months.

rogerpfaff’s picture

rogerpfaff
he/his
Primary language German
Location Munich
commented
StatusFileSize
new fix-transparent-background.patch737 bytes

I wrote a patch to get back to a white background. This is patched against latest version from git (7.x-2.x).

devin carlson’s picture

devin carlson commented
Status: Active » Needs review
StatusFileSize
new views-ui-2535222-11.patch657 bytes

Unfortunately, there's no straightforward fix to this issue. The CSS will continue to get overridden with new D8 core updates and Views UI uses ctools modals whose assets are very difficult to modify (they don't use libraries and call drupal_add_*) so this can't be fixed for all ctools modals.

Given the popularity of Views UI, I think the best solution is to attach the Dialog assets to the View UI edit page as if it were using Dialog. That way, the ctools modals will continue to be used but will be styled appropriately.

devin carlson’s picture

devin carlson commented
Status: Needs review » Fixed

Tested #11 and committed to Dialog 7.x-2.x.

  • Devin Carlson committed 3c4060e on 7.x-2.x 
    Issue #2535222 by Devin Carlson, rogerpfaff: Dialog causing transparent...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

apmsooner’s picture

apmsooner commented

The way this was fixed completely messes up the ui of views. I urge to revert the way this was patched and just add a simple css style for views that sets the background color to white as originally proposed. I don't see the point in forcing all of dialog styles and javascript in views administration for such a minor issue.

apmsooner’s picture

apmsooner commented
Status: Closed (fixed) » Needs work
apmsooner’s picture

apmsooner commented

Instead of adding dialogs assets which breaks views ui, just add more specificity as an extra class like this will fix the problem:

.ui-widget.views-ui-dialog {
  background: #fff;
}
apmsooner’s picture

apmsooner commented
Status: Needs work » Needs review
caschbre’s picture

caschbre commented
Status: Needs review » Needs work

@ampsooner this shouldn't break the Views UI if the admin pages are using jQuery 1.7+. If you're using the jQuery version provided with Drupal or anything below 1.7 then Dialog does indeed break the Views UI.

This module should probably perform some sort of check before performing the form_alter, or add a hook_requirements that can let the admin know what's going on.

Another option could be disabling Dialog for certain paths (e.g. /admin)... though this should be a different issue.