Layout inside the Window gets weird after reopening it

[ColocoParticipant]

Greetings,

I have a jqxWindow which contains a jqxDropDownList like this :

<div id="selectionMail">
    <p>Choisissez l'adresse de messagerie sur laquelle appliquer la signature :</p>
    <div id="choixAdresse"></div>
    <input type="button" id="okButton" value="Choisir"/>
</div>

selectionMail is the id of my Window and choixAdresse is the id of my DropDownList.

Here’s the JavaScript of the Window initialization :

$("#selectionMail").jqxWindow({
    showCollapseButton: false,
    resizable: false,
    draggable: false,
    theme: theme,
    width: 500,
    height: 150,
    autoOpen: false,
    isModal: true,
    title: "Adresse de messagerie",
    okButton: $('#okButton'),
    initContent: function(){
        $("#choixAdresse").jqxDropDownList({
            width: "400px",
            height: "20px",
            theme: theme,
            source: sourceMessagerieFormate,
            displayMember: "name",
            valueMember: "id",
            autoDropDownHeight: true,
            selectedIndex: 0,
            popupZIndex:99999
        })
    }
});
$("#selectionMail").on('close', function(event){
    if (event.args.dialogResult.OK){
        envoyerDonnees(); // Sends a POST request
    }
});

My window is opened after form validation. It works perfectly fine the first time I open it as you can see here :

But when I close the window (by clicking on the X or by click on “Choisir”), if I reopen it (by resubmitting the form), the layout gets all weird :

I suppose calling destroy on the Window on the close event would work but I’d have to remake the HTML everytime in JS which is not very practical.

Do you have any idea why this happens ?

Thanks in advance,
Coloco

EDIT : I’m of course using jqWidgets 3.8. Happens on both Firefox and IE.

[ColocoParticipant]

I temporarily fixed it by setting the CSS of #choixAdresse to :

#choixAdresse{
    height: 20px !important;
    width: 400px !important;
}

This is not a very acceptable solution however and I still haven’t figured out why the width/height of the DropDownList isn’t taken into account the second time the window shows up. If I put the #okButton declaration in the Window’s initContent, it produces the same results but for some reason the button’s size is kept the same after the 2nd time while the DropDownList isn’t.

[ivailoParticipant]

Hi Coloco,

You have to use some rules when you create jqxWindow.

Here is the right way to organize the window’s html.

<div id="selectionMail">
	<div>Choisissez l'adresse de messagerie sur laquelle appliquer la signature :</div>
	<div>
   		 <div id="choixAdresse"></div>
   		 <input type="button" id="okButton" value="Choisir"/>
	</div>
</div>

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[ColocoParticipant]

Thanks a bunch, seems weird that it worked the first time tho

[Author]

Posts