This is a migrated thread and some comments may be shown as answers.

Full screen edit mode with multiple Editors on page

3 Answers 438 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Icon asked on 12 Jun 2020, 02:58 PM

Hi,

I'm experiencing some issues when implementing the full screen edit mode for editors when more than one editor appears on the page.

I have followed the example on this page: https://docs.telerik.com/kendo-ui/controls/editors/editor/how-to/appearance/show-editor-in-full-screen

and it works well when there is only one editor.

When there are multiple editors, the full screen edit mode always displays the content of the last editor on the page.

Here is an example of the behaviour using the code from the link above and simply creating another editor:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.default-v2.min.css"/>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2020.2.513/js/kendo.all.min.js"></script>

</head>

<body>

<textarea class="editor" id="editor1"></textarea>

<textarea class="editor" id="editor2"></textarea>

<style>

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {

.selector:not(*:root), .k-fullscreen .k-editor .k-editable-area {

height: auto;

}

.selector:not(*:root), .k-fullscreen .k-editor .k-editor-toolbar-wrap {

height: 35px;

}

.k-fullscreen .k-editor {

position: fixed;

left: 0;

top: 0;

width: 100%;

height: 100% !important;

}

</style>

<script>

var classHolder = $(document.documentElement);

var fullscreenChange = "webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange";

$(document).bind(fullscreenChange, $.proxy(classHolder.toggleClass, classHolder, "k-fullscreen"));

function toggleFullScreen() {

var docEl = document.documentElement;

var fullscreenElement =

document.fullscreenElement ||

document.mozFullScreenElement ||

document.webkitFullscreenElement ||

document.msFullscreenElement;

var requestFullScreen = docEl.requestFullscreen ||

docEl.msRequestFullscreen ||

docEl.mozRequestFullScreen ||

docEl.webkitRequestFullscreen;

var exitFullScreen = document.exitFullscreen ||

document.msExitFullscreen ||

document.mozCancelFullScreen ||

document.webkitExitFullscreen;

if (!requestFullScreen) {

return;

}

if (!fullscreenElement) {

requestFullScreen.call(docEl, Element.ALLOW_KEYBOARD_INPUT);

} else {

exitFullScreen.call(document);

}

$(".editor").kendoEditor({

tools: [

{

name: "fullscreen",

template:

'<a class="k-button" onclick="toggleFullScreen()">' +

'<span class="k-icon k-i-maximize k-tool-icon" /> Toggle fullscreen' +

'</a>'

}

]

});

</script>

</body>

</html>

3 Answers, 1 is accepted

answered on 16 Jun 2020, 02:48 PM

Hi Icon,

I inspected the provided snippet. The styles applied in order to display the Editor on full-screen are using the "k-fullscreen" and "k-editor" classes. Those styles match both Editors. Thus, both of the Editors are actually displayed on fullscreen. The second Editor is displayed over the first Editor. Here is a screencast where after hiding the second Editor, the first one is displayed also on fullscreen.

To avoid this behavior I would suggest you try to use different handlers for each Editor. You could also use different selectors for each Editor in order to apply the logic for rendering on full screen on two different elements using Full-screen API.

I hope the provided information will help.

Regards,
Neli
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

answered on 17 Aug 2020, 09:02 AM

Hello,

I would suggest you try to hide the second Editor when the 'Toggle fullscreen' button is clicked in the first Editor. For example, you could send a parameter to mark which Editor is about to be rendered on full-screen mode.

      $("#editor").kendoEditor({
        tools: [
          {
            name: "fullscreen",
            template:
            '<a class="k-button" onclick="toggleFullScreen(1)">' +
            '<span class="k-icon k-i-maximize k-tool-icon" /> Toggle fullscreen' +
            '</a>'
          }
        ]
      });

In case, it is the first Editor, at the end of the toggleFullScreen(editor) method, you could hide the second Editor:

if(editor == 1){          
	$(".k-editor").eq(1).hide() 
}

When the Editor is about to exit the full-screen mode, you could show the Editor again.

I hope the provided suggestion will be helpful for resolving the issue.

Regards,
Neli
Progress Telerik