rending with width and height zero values

Jan 11, 2012 at 8:56 PM

Here is my problem, the htmlarea is rending but the toolbars is all collapse together in to a single column and i cannot see the area where i can type. I have looked in to the render html code using the developer tool in ie 9, and here is what i see.... I have highlighted the area of concern, it seems that at the time of htmlarea initialization these inline styles are added but they have zero values. I spent whole day playing around with the code with no luck. Another strange thing about this is that it works fine in another page on my project, it will render with width vaules appropriately, just buffling. I hope that someone can shine a light on this for me. One more thing, the following div is contained inside a nother div with the follwoing valule <div style="width:800px; height:210px; border:1px solid red; " >...</div>

<div class="jHtmlArea" style="width: 0px;">

     <div class="ToolBar">

     ....

     </div>

     <div>

          <iframe style="width: 0px; height: 0px;">

          ...

          </iframe>

     </div>

     <textarea id="SchChgReasonHtmlArea" style="width: 100%; overflow: auto; display: none;" rows="10" cols="83">

          ...

     </textarea>

</div>

Jan 12, 2012 at 6:51 PM

anyone ?

May 25, 2012 at 12:24 AM

Yes I am having the same problem,  I have JQuery UI installed as well as a few other js files included a chat and video scripts.  I did not see anything in the JHtml js file do this.  so I just punted for now and added this.  $(".myTextArea").removeAtt('style') 

Also toggling between the html and the text I loose both textareas. 

May 25, 2012 at 12:37 AM
Edited May 25, 2012 at 12:38 AM

I have style="height: 0" in the iframe still hoping to debug this tomorrow and get it working before having to punt and you one of the heavier non jquery based editors

Apr 24, 2013 at 1:20 PM
I had the same problem. Here's why it's happening. If you have the textarea hidden (because of css/js, like with tabs), then jHtmlArea calculates its' width and height as 0. So the fix is to either make sure that the textarea is not hidden, or add another function that initiates when the hidden text area is shown.

Normal usage, but making sure the textarea is actually visible:
$("textarea:visible").htmlarea();
For cases where you need it to initiate later on, after showing the div, you can do this:
if ($('.myDiv').is(":visible")) {
        $("textarea:visible").htmlarea();
}
That's the basic idea anyway. I've just implemented a fix like this, and haven't has a problem so far.
Jul 21, 2013 at 11:50 AM
Thanks a lot Justin!
It was very helpful and you've just saved me a lot of headache and time.