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

Problem with Editor in Jquery Dialog

3 Answers 289 Views

Editor

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

Neil asked on 20 Apr 2012, 06:00 PM

Hi guys,

Im having trouble getting an editor to working inside a jquery dialog box. The result of the code below is that the the editor is drawn very small and you are unable to enter any text.

Any help you might be would be greatly appreciated.

<div id="createBulletinDialog" style="display: none;" title="Create Bulletin">

<p>

Fill in the form below to create a new bulletin

</p>

<table width="100%">

<tr>

<th>

Name:

</th>

</tr>

<tr>

<td>

@Html.TextBoxFor(n => n.Name, new { name = "Name" })

</td>

</tr>

<tr>

<th>

Message:

</th>

</tr>

<tr>

<td>

@*@Html.TextBoxFor(n => n.Message, new { name = "Message" })*@

<textarea id="editor" name="Message" rows="10" style="width: 100%;"></textarea>

</td>

</tr>

</table>

</div>

3 Answers, 1 is accepted

answered on 26 Apr 2012, 02:32 PM

Hey Alex,

Sorry about the delay getting back to you.

Below is a sample page that replicates my problem.

Cheers

Neil

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<link href="../../Content/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />

<link href="../../Kendo/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />

<link href="../../Kendo/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />

<script src="../../Scripts/2011.3.1115/jquery-1.6.4.min.js" type="text/javascript"></script>

<script src="../../Scripts/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>

<script src="../../Kendo/js/kendo.all.min.js" type="text/javascript"></script>

<script>

$(document).ready(function () {

$("#editor").kendoEditor({

tools: [

"bold",

"italic",

"underline"

]

});

function openDialog() {

var $dialog = $('#bulletinDialog').dialog({

autoOpen: false,

modal: true,

width: 400,

height: 300

});

$("#bulletinDialog").parent().appendTo($("form:first"));

$dialog.dialog('open');

}

</script>

</head>

<body>

<input type="button" value="test dialog" onclick="openDialog();" />

<div id="bulletinDialog" style="display: none;" title="Bulletin">

<textarea id="editor" name="Message" rows="10"></textarea>

</div>

</body>

</html>

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

Problem with Editor in Jquery Dialog

3 Answers, 1 is accepted