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

Bootstrap Skin

4 Answers 431 Views
ImageEditor
This is a migrated thread and some comments may be shown as answers.
Tony
Top achievements
Rank 1
Tony asked on 24 Feb 2017, 06:37 PM

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

Sort by
0
Vessy
Telerik team
answered on 27 Feb 2017, 05:42 PM
Hi Tony,

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tony
Top achievements
Rank 1
answered on 27 Feb 2017, 07:47 PM
Do you have a timetable for the next release?  This is a rather serious bug.
0
Tony
Top achievements
Rank 1
answered on 27 Feb 2017, 07:49 PM
Do you have a link for the latest build?  We downloaded UI for ASP.NET AJAX R1 2017.
0
Vessy
Telerik team
answered on 28 Feb 2017, 12:18 PM
Hi Tony,

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
ImageEditor
Asked by
Tony
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Tony
Top achievements
Rank 1
Share this question
or