After making a hidden element visible, width of datepicker is zero

[m3l0nc0lly]

First, great plug in.

I use it all over my app, and it works fine, except

When I make a hidden element visible (and the element contains a datepicker), the width of the datapicker span element is zero. I can see the datpicker, but it's very narrow, the calendar icon now appears to the left of it and when I select a date, the selected date is not visible (but it IS there, i can save it) but it's not a good user experience.

When I inspect the element, I see:

<span class="Zebra_DatePicker_Icon_Wrapper" style="display: block; position: relative; float: none; top: auto; right: auto; bottom: auto; left: auto; margin: 0px; padding: 0px; width: 0px;">

and if i manually change width to something like 250, it all works perfectly.

I have tried the .update() function but that didn't work (for me).

What can i do - it would finish off my project beautifully to have this piece working

[stefangabos]

the 'update' function is the one you have to use but it will only work if you call it after the element is made visible

[m3l0nc0lly]

Many thanks, got that working now, by using the following:

var dp = document.getElementsByClassName("Zebra_DatePicker_Icon_Wrapper");

var i;

for (i = 0; i < dp.length; i++) {

dp[i].style.width = "100%";

}

var dp2 = document.getElementsByClassName("Zebra_DatePicker_Icon");

for (i = 0; i < dp2.length; i++) {

dp2[i].style.top = "11.4px";

}

It's probably clunky but it gets the job done.