This question is locked. New answers and comments are not allowed.
Hello,
Is there a way to have two Editor controls resized automatically inside two panels of a vertical Splitter?
I tried lot of things and I don't have yet a working solution
The best thing I got so far is this:
On spliter I connect client events
.ClientEvents(events => events.OnResize("onUpdateEditorsHeight").OnExpand("onUpdateEditorsHeight").OnCollapse("onUpdateEditorsHeight"))
function onUpdateEditorsHeight(e) {
$("table,#Description").height( $("#Splitter").children().first()[0].style.height ); // first() would return the first panel element
$("table,#Body").height( $("#Splitter").children().last()[0].style.height ); // last() will return the second panel element
}
There are two problems with this approach.
1. Even if I set the height of the Editor's outer table correctly with the height of the parent panel , for some reasons the Editor will be (look) higher than the panel, part of it will be outside panel and the panel show scroll bars - this part will be constant to ~ 65px. If I substract this part from panel height I still have the next problem.
2. Seems that the spliter panel (the one in the middle that is dragged) does not capture the mouse, somehow when I drag the spliter over the editors it get stuck - sometime works if I drag it with very small steps only, slowly.
Any help is appreciated!
Thanks,
Vasile
Is there a way to have two Editor controls resized automatically inside two panels of a vertical Splitter?
I tried lot of things and I don't have yet a working solution
The best thing I got so far is this:
On spliter I connect client events
.ClientEvents(events => events.OnResize("onUpdateEditorsHeight").OnExpand("onUpdateEditorsHeight").OnCollapse("onUpdateEditorsHeight"))
function onUpdateEditorsHeight(e) {
$("table,#Description").height( $("#Splitter").children().first()[0].style.height ); // first() would return the first panel element
$("table,#Body").height( $("#Splitter").children().last()[0].style.height ); // last() will return the second panel element
}
There are two problems with this approach.
1. Even if I set the height of the Editor's outer table correctly with the height of the parent panel , for some reasons the Editor will be (look) higher than the panel, part of it will be outside panel and the panel show scroll bars - this part will be constant to ~ 65px. If I substract this part from panel height I still have the next problem.
2. Seems that the spliter panel (the one in the middle that is dragged) does not capture the mouse, somehow when I drag the spliter over the editors it get stuck - sometime works if I drag it with very small steps only, slowly.
Any help is appreciated!
Thanks,
Vasile
3 Answers, 1 is accepted
0
Hello Vasile,
The Editor uses a 100% high iframe element for its editable area. The iframe resizes together with its parent elements, however, it would not shrink below 150px unless an explicit pixel height style is applied to it. If you need the Editor to be that small, some additional Javascript will be required (see below).
The problem related to the inability to resize the Splitter panes is caused again by the Editors' iframes, which do not bubble mouse events to the parent page. The workaround for this limitation is to cover the iframes with some element while the panes are resized.
In old IE browsers the table cell, which holds the iframe expands more than needed when the Editor must be 100% high, so again, some Javascript is required to fix this.
Here is a demo, which deals with the discussed problems.
master page
view
Kind regards,
Dimo
the Telerik team
The Editor uses a 100% high iframe element for its editable area. The iframe resizes together with its parent elements, however, it would not shrink below 150px unless an explicit pixel height style is applied to it. If you need the Editor to be that small, some additional Javascript will be required (see below).
The problem related to the inability to resize the Splitter panes is caused again by the Editors' iframes, which do not bubble mouse events to the parent page. The workaround for this limitation is to cover the iframes with some element while the panes are resized.
In old IE browsers the table cell, which holds the iframe expands more than needed when the Editor must be 100% high, so again, some Javascript is required to fix this.
Here is a demo, which deals with the discussed problems.
master page
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %><!DOCTYPE html><html><head runat="server"> <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title><%: Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.vista.css")) %> <asp:ContentPlaceHolder ID="HeadContent" runat="server" /></head><body><asp:ContentPlaceHolder ID="MainContent" runat="server" /><%: Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Combined(true).Compress(true)) %></body></html>view
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Simple.Master" Inherits="System.Web.Mvc.ViewPage" %><asp:Content ID="aboutTitle" ContentPlaceHolderID="TitleContent" runat="server"> Splitter</asp:Content><asp:Content ID="styles" runat="server" ContentPlaceHolderID="HeadContent"><style type="text/css">html,body{margin:0;padding:0;height:100%;}html{overflow:hidden}.t-editor-toolbar-wrap{height:1px;}</style></asp:Content><asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server"> <% Html.Telerik().Splitter() .Name("Splitter1") .Orientation(SplitterOrientation.Vertical) .HtmlAttributes(new { style = "height:100%;" } ) .Panes(vPanes => { vPanes.Add() .Collapsible(true) .MinSize("100px") .Content(() => {%> <% Html.Telerik().Editor().Name("Editor1").HtmlAttributes(new { style = "height:100%" }).Render(); %> <%}); vPanes.Add() .Collapsible(true) .MinSize("100px") .Content(() => {%> <% Html.Telerik().Editor().Name("Editor2").HtmlAttributes(new { style = "height:100%" }).Render(); %> <%}); }) .ClientEvents(events => events.OnLoad("splitter_load").OnResize("splitter_resize")) .Render(); %> <script type="text/javascript"> function splitter_load() { window.setTimeout(function(){ $("iframe").mouseenter(function() { var pane = $(this).closest(".t-pane"); if(pane.parent().find(".t-ghost-splitbar").length > 0) { var overlay = $("<div class='editorOverlay' />"); overlay.appendTo(pane); overlay.css({ position: "absolute", width: "100%", top:0, left:0, height: "100%" }); } }); resizeEditors(); }, 1); } function splitter_resize(arg) { $(this).find(".editorOverlay").remove(); resizeEditors(); } function resizeEditors() { $(".t-pane .t-editor").each(function(index, element) { $(element).height($(element).closest(".t-pane").height()); }); $(".t-pane iframe.t-content").each(function(index, element) { window.setTimeout(function() { var isOldIE = $.browser.msie && $.browser.version < 9; $(element).height($(element).closest(".t-pane").height() - $(element).closest(".t-pane").find(".t-editor-toolbar-wrap").outerHeight() - 16); if (isOldIE) { $(element).parent().height($(element).height()); } }, 100); }); } </script></asp:Content>Kind regards,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Vasile
Top achievements
Rank 1
Rank 1
answered on 19 Sep 2011, 09:03 PM
Hello Dimo,
Appreciate your help, the solution you gave me works!
There is one minor issue if both panels are colapsible at some point the splitter will not handle corectly the spliter state, it allows you to colapse both panels and then you can't restore them. I assume this is a general problem of the spliter control and not related to the editor sizing method. The corect behavior perhalps would be that if there are only two panels in the spliter then when one is colapsed it should toggle (restore) the other one if colapsed, maybe you can consider this in future fixes of the spliter control.
Thank you
Vasile
Appreciate your help, the solution you gave me works!
There is one minor issue if both panels are colapsible at some point the splitter will not handle corectly the spliter state, it allows you to colapse both panels and then you can't restore them. I assume this is a general problem of the spliter control and not related to the editor sizing method. The corect behavior perhalps would be that if there are only two panels in the spliter then when one is colapsed it should toggle (restore) the other one if colapsed, maybe you can consider this in future fixes of the spliter control.
Thank you
Vasile
0
Hello Vasile,
You are right, the issue is in the Splitter. We will research for possible ways to fix this in the future. In the meantime, if you have two adjacent collapsible panes, you can omit the .Collapsible(true) property for one or both of them and only allow resizing with the splitbar. The user interface will remain practically the same.
Best wishes,
Dimo
the Telerik team
You are right, the issue is in the Splitter. We will research for possible ways to fix this in the future. In the meantime, if you have two adjacent collapsible panes, you can omit the .Collapsible(true) property for one or both of them and only allow resizing with the splitbar. The user interface will remain practically the same.
Best wishes,
Dimo
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now