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

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

开发者_StackOverflow社区<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 ?

I had exactly the same problem and after some digging was able to solve it as follows:

1. Instead of display: none; use visibility:collapse;
2. Set the width of the elements that are to be transformed to auto width: auto !important;

have you explicitely defined #divUserId in your CSS?

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

I was looking at the source code for jqTransform today as it seemed to be getting the width of the containing element wrong. It seems to also look at the 'size' attribute of your input field.

So you could try:

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

Note that in the source of the plugin, it's multiplying size by 10 and then adding 10px, then doing something else funky for safari. You might have to fiddle around with it a bit.

Hope that does it for you :D

I had same problem and this is how I solved it.

Instead using display:none in CSS to hide the form I'm using height:0;overflow:hidden.

Next, in my js I'm using animate instead slideToggle I was using before to display the form. In my case code looks like this:

$(function() {
      $('#showAdvanced').toggle(function() {
        $('#sfBlock03').animate({
          height: 350
        });
      }, function() {
        $('#sfBlock03').animate({
          height: 0
        });
      });
    });

Note: #showAdvaced is the id of the button to show advanced options and #sfBlock03 is the id of the div containing advanced form.

I hope this helps.

In my scenario, i was working on a search page, where during form load, there is a search box having small number of search parameters and the user can make the search specific by clicking on advanced search button which will $.slideToggle() a hidden div containing advanced search parameters. The problem i faced was, jqTransform sets height and width of any form element it transforms if it is hidden using the stylesheet property display:none which i used to hide the advanced parameters div before $.slideToggle() sets it to block, so what i did was i set the width and height of the transformed elements by using writing a callback function for the $.slideToggle()

 $("#advancedSearchDIV").slideToggle("slow", function(){
    $("#advancedSearchDIV div.jqTransformSelectWrapper ul").each(
        function() {
        $(this).width(246);
        var height = 24;
        if($(this).children().length >= 6){
            height = 5 * height;
        } else {
            height = ($(this).children().length - 1) * height;
        }
    $("#advancedSearchDIV div.jqTransformSelectWrapper ul").height(height);
    $("#advancedSearchDIV div.jqTransformSelectWrapper ul").css("overflow","auto");
    });
});

Try this:

 <div id="divUserInfo" style="width:300px;display:none;">
     <input size="30" type="text" id="txtName" />
 </div> 

or

 <div id="divUserInfo" style="display:none;">
    <input size="30" type="text" id="txtName" style="width:300px;" />
 </div>

I had same problem and I solved with 'visibility'. It is 100 per cent works...

$(".c-ekleyin").click(function(){
$(".sel-boxrow2").css("visibility" , "inherit");
$(".c-ekleson").show();
$(".c-ekleyin").hide();
});

<div class="sel-boxrow2" style="visibility:hidden;">
         <select name="select2" style="width:42px;">
             <option value="">---</option>
             <option value="opt1">1</option>
         </select>