Hi,
When I load the boostrap skin, the formatting on the editor is not aligned properly (see attached screenshot)
My code is as follows.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
<!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 runat="server">
<title></title>
<style type="text/css">
/* These allow the image editor to have a scroll bar */
/* This is very much a hack. May cause unexpected problems. Remove if necessary */
/* http://www.telerik.com/forums/need-to-learn-rad-image-editor-functioning */
#horizontalScrollHint, #verticalScrollHint {
display: none !important;
}
.RadImageEditor .rieContentArea {
overflow: auto !important;
}
</style>
<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
</Scripts>
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<div>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
<telerik:RadImageEditor ID="RadImageEditor1" runat="server" ToolsFile="~/ToolsFile.xml" Skin="Bootstrap" ExternalDialogsPath="../ImageEditorDialogs">
<tools>
<telerik:ImageEditorToolGroup>
<telerik:ImageEditorTool Text="customSave" CommandName="customSave" />
</telerik:ImageEditorToolGroup>
</tools>
</telerik:RadImageEditor>
<telerik:RadComboBox RenderMode="Lightweight" ID="fontFamily" runat="server" AutoPostBack="false" EnableViewState="false"
CausesValidation="false" Width="130px">
<Items>
<telerik:RadComboBoxItem Text="Arial" Value="arial" />
<telerik:RadComboBoxItem Text="Times New Roman" Value="times new roman" />
<telerik:RadComboBoxItem Text="Verdana" Value="verdana" />
<telerik:RadComboBoxItem Text="Tahoma" Value="tahoma" />
<telerik:RadComboBoxItem Text="Courier New" Value="courier new" />
<telerik:RadComboBoxItem Text="Georgia" Value="georgia" />
<telerik:RadComboBoxItem Text="Ms Sans Serif" Value="ms sans serif" />
</Items>
</telerik:RadComboBox>
<script type="text/javascript">
Telerik.Web.UI.ImageEditor.CommandList["customSave"] = function (imageEditor, commandName, args) {
imageEditor.saveImageOnServer("Sunset", true);
}
</script>
</telerik:RadAjaxPanel>
</div>
</form>
</body>
</html>
Thanks!
4 Answers, 1 is accepted
We are aware of this bug and it has been already fixed in our latest release, you can test it here:
http://demos.telerik.com/aspnet-ajax/imageeditor/examples/overview/defaultcs.aspx?skin=Bootstrap
Regards,
Vessy
Telerik by Progress
Rank 1
Rank 1
The bug is fixed in the latest R1 release, but you will need to use HTML5 <!DOCTYPE> declaration when you are using the Lightweight rendering of the controls
<!DOCTYPE html>Regards,
Vessy
Telerik by Progress