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

[Bug Report] 2013.2.716 Editor toolbar layout issue

4 Answers 104 Views

Editor

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

Lei asked on 23 Jul 2013, 11:54 PM

editor.zip

Hi there,

After upgraded to version 2013.2.716, I found that the layout of editor toolbar is not correct if the editor is hidden when initialization and toolbar needs multiple lines. All icons in toolbar are in one line, exceeds the right boarder of editor. If I click the edit area, all icons are positioned correctly. Here is my test code (also attached):

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Kendo UI Editor Toolbar Issue</title>

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">

<style>

/* uncomment following line for a workaround */

/* .k-editor-toolbar{ white-space: normal;} */

</style>

</head>

<body>

<h1>Kendo UI Editor Toolbar Issue</h1>

<div id="editdiv" style="display: none">

<div>

<textarea id="editor" cols="30" rows="10"

style="width:570px;height:300px"></textarea>

</div>

<button id="show">Show Editor</button>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.web.min.js"></script>

<script>

$(function(){

$("#editor").kendoEditor({

encoded: true,

tools: [ "bold", "italic", "underline", "strikethrough",

"justifyLeft", "justifyCenter", "justifyRight",

"justifyFull", "insertUnorderedList", "insertOrderedList",

"indent", "fontName", "fontSize", "outdent",

"foreColor", "backColor"]

});

$("#show").on('click', function(){

$("#editdiv").show();

$(this).hide();

})

});

</script>

</body>

</html>

I found a temp work around though, add following line to my own css:
.k-editor-toolbar{ white-space: normal;}

Gong

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

[Bug Report] 2013.2.716 Editor toolbar layout issue

4 Answers, 1 is accepted