Bootstrap Modal does not work/makes it impossible to change the text format on the body field. I noticed this because i was debugging some issues with Twig Filters.

Steps to Replicate:

Step 1: The latest stable release of Drupal 8 was installed on simplytest.me
Step 2: The latest stable release of the Bootstrap Theme was installed.
Step 3: On the admin/appearance page, [Use the administration theme when editing or creating content] was deselected in order to use the bootstrap theme when adding or editing content.
Step 4: Using the default Article Content Type, Add a basic article and enter some random text in the body field.
Step 5: Change the text format to Full HTML
Step 6: Try to Change the Text Format back to Basic Html

Step 6 - Bug

At Step 6, this is where the modal attempts to display but does not display. Only a black overlay is shown instead of this Confirmation Dialog ===>> (Changing the text format to Basic HTML will permanently remove content that is not allowed in that text format.
Save your changes before switching the text format to avoid losing data.)

I've tested this with the Seven Theme and a couple other contrib themes and the modal works properly.
Note: The same modal code seems to be responsible for the Add Image and Add Url dialogs and they work perfectly fine. This might possibly be a simple fix.

Comments

gcharles created an issue. See original summary.

steinmb’s picture

steinmb commented
Priority: Normal » Major

* Firefox 48.x
* OS: 10.11.x

Confirm I also see this. Core editor enabled in both input format. Switching input format render the form "un-responsive" to the end user. Only way to get out of it is reloading the page. Form then show with the new input format.

Bumping this to major since it make the site hard to use to end users and they might end up loosing entered data.

ronaldtebrake’s picture

ronaldtebrake commented

Confirmed this as well.

Some more technical information regarding this, hopefully it's helpful:

Introduced
It was introduced in https://www.drupal.org/node/2637888

What happens here is, in LibraryInfo.php on line 68 the core dialog library drupal.dialog gets overridden by the bootstrap/drupal.dialog
also the core drupal.dialog.ajax library is overridden by the one in bootstrap bootstrap/drupal.dialog.ajax.

Why it works for the Image and Url dialogs?
These now use bootstrap/drupal.dialog.ajax which in turn requires bootstrap/js/misc/dialog.ajax.js
in this file you will see $(Drupal.theme.bootstrapModal()).appendTo('body');
which in turn uses the bootstrapModal()) function available at bootstrap/js/modal.js
which themes the dialog for the URL and Image windows and gives it the correct markup that bootstrap requires.

Why doesn't it work for the format filter
When looking at core/modules/editor/js/editor.js you'll see

var message = Drupal.t('Changing the text format to %text_format will permanently remove content that is not allowed in that text format.<br><br>Save your changes before switching the text format to avoid losing data.', {
    '%text_format': $select.find('option:selected').text()
});
var confirmationDialog = Drupal.dialog('<div>' + message + '</div>', {
        title: Drupal.t('Change text format?'),
        dialogClass: 'editor-change-text-format-modal',

This is where the dialog messages get's generated, while bootstrap wants a themed message with more markup in order to
apply the correct dialog css to the window.

If you reproduce this bug, you'll see that the confirmationDialog does get generated at the end of the body tag, just not
with the markup bootstrap requires.

Haven't found a way to properly fix this.

kratze’s picture

kratze commented

Hello,

i can also confirm the same issue. I have drupal 7.32 installed and i can't format any text on my site.
Neither on an article or a full page.

Some further information

  • Drupal 7.32 installed
  • CKEditor installed
  • Bootstrap Cerulean Theme installed - from custom CDN Provider
jaspher’s picture

jaspher commented

Workaround: use admin theme until this is resolved:

  1. Check "Use the administration theme when editing or creating content" box in /admin/appearance.
  2. Give the appropriate role the "View the administration theme" permission.
pvdpdrop’s picture

pvdpdrop commented

As an alternative workaround (for D8), just disable the modal setting of your bootstrap subtheme:
Point your browser to /admin/appearance/settings/
Then disable the following setting: Bootstrap Settings > Javascript > Modals > Enable Bootstrap Modals

fadgadget’s picture

fadgadget commented

Hi #5 & #6 never worked for me and the great info in #3 is still a little beyond me at the moment. I only seem to have problems with the PAGER modal appearing in views. I cant change how many items. Really getting me down. Can anyone think of what that might be specifically.

ah wait a minute its just all the PAGER views admin modals i am not getting so thus i am thinking that maybe there is a problem with my ......pager tpl? i will go see.

No i have no idea. Everything seems as it should :(

fadgadget’s picture

fadgadget commented

sorted. I disabled Devel.

bmango’s picture

bmango commented

#6 worked for me on Drupal 8 using the bootstrap theme.

markhalliwell’s picture

markhalliwell
Primary language English
commented
Status: Active » Closed (duplicate)
Issue tags: -Bootstrap modal
Related issues: +#2831237: Bootstrap modal does not work well with jQuery UI dialog