Height should be applied to 2 elements: main TABLE and inner TD/IFRAME element.The inner element is different for different browsers. For not IE that is IFRAME, and for IE that is TD in main table where editing area is rendered.The height of inner element should be adjusted for heights of toolbar and footer. My sample assumes that height of toolbar-row is 25px and height of footer is also 25px. Those values can be slightly improved for actual offsetHeight, maybe by +/-1..3px.The IFRAME should use px value for height, and TD should use % value for height.In latest version of WebHtmleEditor that inner TD has id equals to (WebHtmlEditor.ClientID + ‘_td_’).In older versions of WebHtmlEditor application should find reference to that TD. My sample covers both cases.Those codes can be copied/pasted in any aspx. Application should only adjust value of ImageDirectory to actual location of images used by WebHtmlEditor.<script type="text/javascript">function changeHeight(height){ // combined offsetHeights of toolbar and footer var tbHeight = 25 + 25 + 25 + 25, id = 'WebHtmlEditor1'; // references to main TABLE and textWindow var editor = document.getElementById(id), textWindow = document.getElementById(id + '_tw'); if(!textWindow) return; // overall height should be set tom main table editor.style.height = height + 'px'; // for not IE browsers, height should be set in px if(textWindow.nodeName == 'IFRAME') { textWindow.style.height = (height - tbHeight) + 'px'; return; } // reference to inner TD, which height defines height of editing area var td = document.getElementById(id + '_td_'); // in older versions of WebHtmlEditor the _td_ identifier is not used, so, // application should find that TD: that is the parent of 2nd inner TABLE var tbls = 2, elem = textWindow, td = document.getElementById(id + '_td_'); while(!td) { elem = elem.parentNode; if(tbls == 0) td = elem; if(!elem || elem == editor) return; if(elem.nodeName == 'TABLE') tbls--; } // set height of TD td.style.height = (height - tbHeight) / height * 100 + '%';}</script>
<ighedit:WebHtmlEditor ID="WebHtmlEditor1" Height="300px" runat="server" ImageDirectory="images/htmleditor/"></ighedit:WebHtmlEditor><input type="button" value="200" onclick="changeHeight(200)" /><input type="button" value="400" onclick="changeHeight(400)" /><input type="button" value="600" onclick="changeHeight(600)" />
Hi Jason,
The height editing-area DIV element in WebHtmlEditor under IE is set dynamically using javascipt calculations and its value depends on height of editor. The value of 100% might trigger some side effects like vertical scrollbar.That "incomplete" height should not affect functionality of WebHtmlEditor and new modified content entered by user should fill all visible height.
Thanks for posting the JavaScript. It provided a great starting point for me to address why the TextWindow component of the HTML Web Editor was 93% high. I detected the 93% that is in a DIV using the Microsoft Internet Explorer developer tools. Shouldn't it be 100% by default? A blank 7% high space is between the TextWindow and the button tabs with the "Design" and "HTML" buttons.
I'm working at a site using the Infragistics.WebUI.WebHtmlEditor that has the following message (info): "Infragistics.WebUI.Shared.AboutDialogEditor, Infragistics4.WebUI.Design.v10.3, Version=10.3.20103.1013, Culture=neutral".