Simplemde-markdown-editor: Unintended fullscreen behavior when SimpleMDE is in a Bootstrap modal

[WesCossick]

Both fullscreen and split fullscreen do not work very well when in a Bootstrap modal.

[Psychokrameur]

I work with ExtJs, and it's also doesn't work very well when using SimpleMDE in a modal Window.
Did not know Bootstrap Modal but I suppose it's quite similar.

[Psychokrameur]

Any idea on how to fix this?

[WesCossick]

I believe it is a CSS issue, but I have not started working on it myself. I'd be open to a PR that fixes this.

[WesCossick]

Possible solution, move SimpleMDE to root of body on full screen, then place it back after. Would need to be a version 2 feature.

[Psychokrameur]

Thanks for the workaround, I will test that.

[joelcuevas]

How about adding a simplemde-fullscreen class to the body when fullscreen mode is active, and providing CSS styles that temporarily alter the Bootstrap/ExtJs modal window size and position?

Quick-and-dirty fix for Bootstrap:

var mde = new SimpleMDE();

mde.codemirror.on('refresh', function() {
    if (mde.isFullscreenActive()) {
        $('body').addClass('simplemde-fullscreen');
    } else {
        $('body').removeClass('simplemde-fullscreen');
    }
});

.simplemde-fullscreen .modal-dialog {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

[WesCossick]

@joelcuevas Could definitely work. Want to submit a PR with this?

[joelcuevas]

Sure.

Should we include the Bootstrap/ExtJS/(AnythingElse?) CSS on the SimpleMDE source styles or the user should add their framework specific styles on their own files?

What do you think?

[WesCossick]

Probably just add to SimpleMDE's source files.

[PabloManuel78]

Hello everyone. We have changed the Bootstrap version to our CMS. Now it works with version 4. The problem is the same. If I press F11 inside a modal window of Bootstrap 4, it stays the same, but the window is not visible. You have attached captures.

[PabloManuel78]

CKeditor, if you do it well, change some higher classes. I put some captures for you to see how CKeditor does it.

Here is CKeditor in normal mode.

DOM

This is what happens in the DOM when I press the full window button. The changes go beyond that of a class. They affect the entire DOM

CKeditor in fullscreem mode:
Is perfect!!!