Listbox layout broken when initialized in an Hidden DIV (display:none)

[jean-fredericParticipant]

Hello,

I did found another issue related to initialising jqWidget component inside Hidden DIV.

As same as : http://www.jqwidgets.com/community/topic/jqxswitchbutton-not-working-if-displaynone/

when the listbox is initialized inside a Hidden DIV AND the width is set to 100%, it work the first time, but not the other time…

Look at this jsfiddle :

http://jsfiddle.net/JeanFrederic/Ke68G/

Do this to reproduce the Issue. There is 3 button, click button in that order :

Hide – Update – Show : This will work normaly.

Do it a 2nd time :

Hide – Update – Show : This will not work. Layout will be screwed.
(the width of the list content will be really smaller)

And after, if you do :

Show – Update, this will work normally since the DIV is visible when initializing.

Thanks

[Peter StoevKeymaster]

Hi jean-frederic,

Thanks for the feedback.

In general, you should always initialize a widget from a visible DIV tag, not from a hidden DIV tag. We do not think to resolve issues coming from invalid initialization.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jean-fredericParticipant]

Hello Peter, thanks for your reply.

Im doing this since I dont want to have any “visual glitch” for a windows “in construction”.

In my application, i have a list of project on the left. When we click on one project in that list, I want to show properties of that project on the right side. Im doing an ajax call and on the success callback, I show the information on the right side. I must “clean” right side between user selection.

But, I dont want to start showing the project information section then, “draw” control in front of customer eye. When information appear on the right side, it’s “ready” to be see.

I hope you will find a way to solve this.
Thanks a lot.

[Peter StoevKeymaster]

Hi jean-frederic,

The simplest solution for you is to use “visibility” property instead of forcing the Layout with “display”. As I wrote, we do not find a problem due to the fact that widgets should be created from a DIV tag which has width and height i.e you can’t render something if it is not there, right. “display: none” hides the element and its rendering size is 0, 0. When you change a property of the widget which makes a layout, the layout would not pass well due to the reason that the current size is 0, 0. I think that it should not be a problem to set a property or call a method when the widget is displayed. “visibility” is also an option, because “visibility” hides the HTML Element, but it does not collapse it i.e it will have Size.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jean-fredericParticipant]

Hello Peter,

Once again, thanks for your advice, will try with visibility instead of display.

Keep you in touch

[jean-fredericParticipant]

Hello, this worked perfectly.

Im use often display:block because most of the time, what I hide, I dont want it to take “screen space”. But in that case, some project properties will be hidden with display:block since not all project have the same properties. But, for the listbox, i will initialize them inside visibility:hidden div, this work.

I updated http://jsfiddle.net/JeanFrederic/Ke68G/

Now, If I click on

Update – Hidden – Update – Visible

it work like a charm !

Thanks a lot.

[Author]

Posts