Scrollbars don't display on RadImageEditor

[Mikhail]

Hi,

I can't get the scrollbars to show up. Below is the html of the whole page but it loads a page base too. Screenshot with a large image and no scrollbars is also attached.

Could something be suppressing them? If so, how can I identify or override?

 

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="DigitalAssetEdit.aspx.vb" Inherits="IronPoint.CM.WebUI.Admin.DigitalAssetEdit" %>
<%@ Register tagPrefix="telerik" namespace="Telerik.Web.UI" assembly="Telerik.Web.UI"%>
<%@ Register TagPrefix="ipuc" TagName="ActionBar" Src="~/cm/webui/usercontrols/ActionBar.ascx" %>

<script type="text/javascript">
  var imageEditor;
  var bUnsavedChanges;

  function imageEditor_load(sender, args) {
    imageEditor = sender;
    imageEditor.zoomBestFit();
  }

  function imageEditor_OnClientImageChanged(imEditor, eventArgs) {
    bUnsavedChanges = 1;
  }

  //parentURL will be populated only when Close button clicked. This will make the page redirect back to caller
  function saveImage(parentURL) {
    imageEditor.saveImageOnServer('', true);
    bUnsavedChanges = 0;
    openDAConfimSaveDialog(parentURL);
  }

  function exportImage(imageName) {
    imageEditor.saveImageOnClient(imageName, false);
  }

  function checkImageChanged(parentURL) {
    if (bUnsavedChanges == 1) {
      openDASaveDialog(parentURL);
    }
    else {
      closeWindow(parentURL);
    }
  }

  function openDASaveDialog(parentURL) {
    $Q("#tblDASaveDialogBox").dialog({
      buttons: {
        "Save": function () { saveImage(parentURL); closeDASaveDialog(); },
        "Discard": function () { closeWindow(parentURL); },
        "Cancel": function () { closeDASaveDialog(); }
      },
      modal: true,
      resizable: false,
      title: "Digital Asset Image Editor",
      width: 290,
      height: 210
    });
  }

  function closeDASaveDialog() {
    $Q("#tblDASaveDialogBox").dialog("close");
  }

  function closeWindow(parentURL) {
    window.location.assign(parentURL);
  }

  function openDAConfimSaveDialog(parentURL) {
    $Q("#tblDAConfimSaveDialogBox").dialog({
      buttons: {
        "OK": function () { closeConfimSaveDialog(parentURL); },
      },
      modal: true,
      resizable: false,
      title: "Digital Asset Image Editor",
      width: 290,
      height: 210,
      close: function () { closeConfimSaveDialog(parentURL); }
    });
  }

  function closeConfimSaveDialog(parentURL) {
    if (parentURL != null) {
      closeWindow(parentURL);
    }
    else {
      $Q("#tblDAConfimSaveDialogBox").dialog("close");
    }
  }

</script>

<ipuc:ActionBar ID="ctlActionBarTop" runat="server" ShowHelpIcon="true" />

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadImageEditor ToolsLoadPanelType="RadAjaxPanel" ID="RadImageEditor1" runat="server" ImageUrl="defaultimage.JPG" 
  Height="100%" Width="100%" EnableResize="true"
  OnClientLoad="imageEditor_load" OnClientImageChanged="imageEditor_OnClientImageChanged">
    <EditableImageSettings MaxJsonLength="50000000" />
    <Tools>
      <telerik:ImageEditorToolGroup>
        <telerik:ImageEditorTool CommandName="Print"/>
        <telerik:ImageEditorToolSeparator />
        <telerik:ImageEditorToolStrip Text="Undo" CommandName="Undo" />
        <telerik:ImageEditorToolStrip Text="Redo" CommandName="Redo" />
        <telerik:ImageEditorTool Text="Reset" CommandName="Reset" />
        <telerik:ImageEditorToolSeparator />
        <telerik:ImageEditorTool CommandName="Crop" />
        <telerik:ImageEditorTool CommandName="Resize" />
        <telerik:ImageEditorTool CommandName="Zoom" />
        <telerik:ImageEditorTool CommandName="ZoomIn"/>
        <telerik:ImageEditorTool CommandName="ZoomOut"/>
        <telerik:ImageEditorTool CommandName="Opacity" />
        <telerik:ImageEditorTool Text="Rotate" CommandName="Rotate" />
        <telerik:ImageEditorTool Text="Flip" CommandName="Flip" />
        <telerik:ImageEditorTool Text="Add Text" CommandName="AddText" />
        <telerik:ImageEditorTool Text="Insert Image" CommandName="InsertImage" />
        <telerik:ImageEditorTool Text="Brightness/Contrast" CommandName="BrightnessContrast" />
        <telerik:ImageEditorTool Text="Pencil" CommandName="Pencil" />
      </telerik:ImageEditorToolGroup>
    </Tools>
</telerik:RadImageEditor>

<div style="display:none" >
<table class="ipbSBModalPanelTable" id="tblDASaveDialogBox" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="align-content:center;">Do you want to save your changes?</td>
</tr>
</tbody>
</table>
</div>

<div style="display:none" >
<table class="ipbSBModalPanelTable" id="tblDAConfimSaveDialogBox" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="align-content:center;">Save Successful</td>
</tr>
</tbody>
</table>
</div>

<ipuc:ActionBar ID="ctlActionBarBottom" runat="server" ShowHelpIcon="true" />

[Vessy]

Hi Mikhail,

In order to disable the drag-to-scroll, you will need to remove the _createDraggableImage() logic of the ImageEditor and show the default scrollbars of the editable image area like follows:

        <style>
            .RadImageEditor .rieContentArea {
                overflow: auto !important;
            }
        </style>
        <telerik:RadImageEditor ID="RadImageEditor1" runat="server" ImageUrl="test.jpg"></telerik:RadImageEditor>
        <script type="text/javascript">
            Telerik.Web.UI.RadImageEditor.prototype._createDraggableImage = function () { }
        </script>

Regards,
Vessy
Progress Telerik

[Mikhail]

Thank you, Vessy! It worked just the way you pasted it in above!

[Vessy]

You are welcome, Mikhail! :)