Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Editor in Bootstrap modal show a blank page with Mobile Theme #4818

Open
bjournaud opened this Issue Feb 8, 2019 · 0 comments

Comments

Projects
None yet
2 participants
@bjournaud
Copy link

bjournaud commented Feb 8, 2019

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
Create a Boostrap modal and add a TinyMce editor.
In desktop mode, everything is fine
In mobile mode, TinyMce show a book to open the editor in full page.
When you click on the book, the navigator show a empty white page without any interaction possible.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via fiddle.tinymce.com or similar.
Having a textearea in a Boostrap modal
http://fiddle.tinymce.com/GBgaab/5

What is the expected behavior?
Show the editor Toolbar

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE?

  • TinyMce 5.0.0
  • Boostrap 4.2.1
  • On Android 9.0 and Chromium (with mobile device switch in dev console)

Explanation
For Boostrap, a modal is a Div with a modal css class. In this class, there is display:none; property.
When Boostrap show the modal, it add display:block in the style attribut of the div but when TinyMce show the fullpage editor, it replace the modal style attribut with

position:absolute!important;
top:0!important;
left:0!important;
margin:0!important;
padding:0!important;
width:100%!important;
background-color:rgba(0, 0, 0, 0)!important

No more display property, the modal is hidden and the editor is also hidden.

I was able to fix it with a little tweak by adding display class on open and close

$('div.modal').on('show.bs.modal', function (event) {
        let modal = $(this);
        modal.addClass('d-block'); // Boostrap class for display-block
    });
    $('div.modal').on('hide.bs.modal', function (event) {
        let modal = $(this);        
        modal.removeClass('d-block');
    });

TinyMce should preserve the display value for textarea parents when TinyMce show the editor.
Or at least, adding this tweaks in Boostrap integration page (https://www.tiny.cloud/docs/integrations/bootstrap/)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.