Bootstrap Skin

5 posts, 0 answers
  1. Tony
    Tony avatar
    4 posts
    Member since:
    Jun 2015

    Posted 24 Feb 2017 Link to this post

    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!

  2. Vessy
    Admin
    Vessy avatar
    1891 posts

    Posted 27 Feb 2017 Link to this post

    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.
  3. Tony
    Tony avatar
    4 posts
    Member since:
    Jun 2015

    Posted 27 Feb 2017 Link to this post

    Do you have a timetable for the next release?  This is a rather serious bug.
  4. Tony
    Tony avatar
    4 posts
    Member since:
    Jun 2015

    Posted 27 Feb 2017 in reply to Tony Link to this post

    Do you have a link for the latest build?  We downloaded UI for ASP.NET AJAX R1 2017.
  5. Vessy
    Admin
    Vessy avatar
    1891 posts

    Posted 28 Feb 2017 Link to this post

    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.
Back to Top