jqTransform:Width is gone when div is hidden using display:none in style.Whats the solution ?

Question

I am using jqTransform plugin to enhance the look and feel of my form.It works well.Now i added a div to the page which has a style="display:none;" and in an event(a button click) in the page,I am trying to show the div.But it looks like the width of the divs which are created by jQtrasform become only 0 px.

My HTML

<div id="divUserInfo" style="display:none;">
  <input type="text" id="txtName" />
</div>

and in my javascript, i am showing the div by

function ButtonClicked()
{
 $("#divUserInfo").fadeIn(100);
}

If i change the display:none to display:block.It will work with jQTrasnform.But i want to hide the div in the page load and show only when the ButtonClicked() function is invoked.

After some googling,I came to know that when a div is hidden,the pluggin will put width as 0 to its elements.

Any thoughts ?

Answer 1

have you explicitely defined #divUserId in your CSS?

#divUserId{ width:300px;display:none;}