Using version 11.2.20112.2086 I am able to view/hide and collapse (takes up no screen space) the ToolBar (functionality buttons above the text box) with client side Java Script and CSS (see below) . This works in IE, Firefox, and Chrome. I have a new workstation now and an updated version of the control: 11.2.2011.2159. Firefox and Chrome still work, but with IE the Tool Bar will show and hide but no longer collapse. The Tool Bar is not visible but there is an empty space which takes up screen space. Do you what could be different with this newer version? Another thing. It works fine in the Visual Studio 2010 Dev Environment but under IIS/Web Server is does not collapse.
<script language="JavaScript" type="text/javascript">
<!--
function HideToolBar(objName, objNameHidden) {
var editor = iged_getById(objName);
editor._tb.style.display = "none";
oFormObject = document.forms[0];
oFormObject.elements[objNameHidden].value = 0;
return false;
}
function ShowToolBar(objName, objNameHidden) {
editor._tb.style.display = "inline";
oFormObject.elements[objNameHidden].value = 1;
-->
</script>
CSS:
.hide { display:none }
.show { display:inline }
<asp:LinkButton ID="linkHideProgress" name="linkHideProgress" CssClass="Detail" CausesValidation="False" OnClientClick="returnHideToolBar('WebHTMLEditorOne','hdnProgress')" runat="server">Hide /</asp:LinkButton>
<asp:LinkButton ID="linkShowProgress" name="linkShowProgress" CssClass="Detail" runat="server" CausesValidation="False" OnClientClick="return ShowToolBar(' WebHTMLEditorOne','hdnProgress')"> Show editor</asp:LinkButton>
I wanted the toolbar to only show when the mouse is over the editor, so I did this:
<script language="javascript" type="text/javascript" > function ToolbarHide(editorId, toolbarId, action) { var t = document.getElementById(toolbarId); var e = document.getElementById(editorId); var h = e.getAttribute(action + "Height"); if (action == "Hide") { t.style.visibility = "collapse"; t.style.display = "none"; e.style.height = h; } else { t.style.visibility = "visible"; t.style.display = "block"; e.style.height = h; } }</script>The editor has custom attributes, which I calculated based on the height of the toolbar:<ighedit:WebHtmlEditor ID="WebHtmlEditor" runat="server" Width="965px" Height="241px" ShowHeight="195px" HideHeight="241px"In the code behind, I then set it up like this:we.Attributes.Add("onMouseOver", "ToolbarHide('" + we.ClientID + "', '" + we.Toolbar.ClientID + "', 'Show');");we.Attributes.Add("onMouseLeave", "ToolbarHide('" + we.ClientID + "', '" + we.Toolbar.ClientID + "', 'Hide');");we.Toolbar.Style.Add("visibility", "collapse");we.Toolbar.Style.Add("display", "none");
Hello Vicktor,
I worked with the suggested code some and it does behave differently in IE now. Thank you. I'm still trying to get the desired behavior right (like I had with version 11.2.20112.2086). Is there any chance I could get the old version 11.2.20112.2086?
-Brett
Hi Brett,
The latest version of WebHtmlEditor has extra logic which adjusts height of editor to match with height value set in server.It used to be that height was applied only to the outer html element (TABLE) and child elements related to editing area had height attributes equals to 100%. There was no adjustments on client and under IE that triggered overall height of editor equals to custom height plus height of toolbar and footer.In order to fix that, the WebHtmlEditor now generates on client approximate percentage heights of editing area (DIV) and one of its parent (TD). On client, javascript codes check instant offsets, calculate required heights and adjust heights of those DIV and TD to exact values, which allow to produce overall value of height defined by server.When toolbar is hidden on client (unexpected and not supported action), then in old version the height attributes of child elements used to be static (100%) and therefore they did not interact with that action. However, I guess that under IE the overall height of WebHtmlEditor with hidden toolbar was probably reduced by the height of toolbar.
Currently the heights of html elements under IE are adjusted within the member method _ie. That action is performed only once (_htSet flag) and it adjusts heights of 2 html elements which have ids: ID+"_td_" and actual editing area.
The best I can suggest to you, is to try use that internal method. To trigger that more than once the _htSet flag should be reset. And in order to restore original height after hide-show, original/old height of _td) element should be restored to its original value. Below is example for you.
function HideToolBar(objName, objNameHidden) { var editor = iged_getById(objName); if (editor._tb.style.display == "none") return; editor._tb.style.display = "none"; if (editor._ie) { var td = document.getElementById(editor.ID + "_td_"); editor._old_td_height = td.height; delete editor._htSet; editor._ie(2); } oFormObject = document.forms[0]; //oFormObject.elements[objNameHidden].value = 0; return false;}
function ShowToolBar(objName, objNameHidden) { var editor = iged_getById(objName); if (editor._tb.style.display == "block") return; editor._tb.style.display = "block"; if (editor._ie) { var td = document.getElementById(editor.ID + "_td_"); td.height = editor._old_td_height; delete editor._htSet; editor._ie(2); } oFormObject = document.forms[0]; //oFormObject.elements[objNameHidden].value = 1; return false;}