Checkboxes misaligned when using jqxTree in a jqxWindow

[mihaisingerParticipant]

Hello
I’m trying to use a jqxTree with checkboxes in a jqxWindow. However, in this case, the tree’s checkboxes are badly misaligned upwards, being displayed at about half distance between the tree’s items. The exact same jqxTree is properly displayed when used by itself on the page. This behaviour is the same in Internet Explorer an Google Chrome… I didn’t test with other browsers.

The following is displayed properly:

<div id=”psTreeSimple”>

• One
• Two
• Three
• Four
• Five

</div>
… and in the javascript
$(document).ready(function(){
$(‘#psTreeSimple’).jqxTree({ height: ‘450px’, width: ‘530px’, checkboxes: true, theme: jqxTheme2 });
});

…while the following is rendered incorrectly, with the checkboxes pushed up to between the items:

<div id=”problemSelector”>
<div id=”psHeader”></div>
<div id=”psContent”>
<div id=”psTree”>

• One
• Two
• Three
• Four
• Five

</div>
<div id=”psButtons” style=”width:100%; height:30px; text-align:center;”>
<input type=”button” id=”btnSaveProblems” value=”Save” />   <input type=”button” id=”btnCancelProblems” value=”Cancel” />
</div>
</div>
</div>

$(document).ready(function(){
$(“#problemSelector”).jqxWindow({
width: 550, height: 560, autoOpen: false, isModal:true, resizable:false, initContent: function () {
$(“#btnSaveProblems”).jqxButton({ width: 80, theme: jqxTheme2, disabled: true });
$(“#btnCancelProblems”).jqxButton({ width: 80, theme: jqxTheme2, disabled: false });
}
});

$(‘#psTree’).jqxTree({ height: ‘450px’, width: ‘530px’, checkboxes: true, theme: jqxTheme2 });
$(“#problemSelector”).jqxWindow({ title: ‘Functional problems’ });
$(“#problemSelector”).jqxWindow(‘open’);
});

Please kindly help me fix this. Thank you.

Regards
Mihai

[mihaisingerParticipant]

Okay, let’s try this again since my initial posting didn’t show properly:

The following is displayed properly:

           <div id="psTreex">
                <ul>
                    <li>One</li>
                    <li>Two</li>
                    <li>Three</li>
                    <li>Four</li>
                    <li>Five</li>
                </ul>
            </div>

… and in the javascript

$(document).ready(function(){
$(‘#psTreeSimple’).jqxTree({ height: ’450px’, width: ’530px’, checkboxes: true, theme: jqxTheme2 });
});

…while the following is rendered incorrectly, with the checkboxes pushed up to between the items:

    <div id="problemSelector">
        <div id="psHeader"></div>
        <div id="psContent">
            <div id="psTree">
                <ul>
                    <li>One</li>
                    <li>Two</li>
                    <li>Three</li>
                    <li>Four</li>
                    <li>Five</li>
                </ul>
            </div>
            <div class="spacer15"></div>
            <div id="psButtons" style="width:100%; height:30px; text-align:center;">
                <input type="button" id="btnSaveProblems" value="Save" />&nbsp;&nbsp;&nbsp;<input type="button" id="btnCancelProblems" value="Cancel" />
            </div>
        </div>
    </div>

$(document).ready(function(){

$(“#problemSelector”).jqxWindow({ width: 550, height: 560, autoOpen: false, isModal:true, resizable:false, initContent: function () {
$(“#btnSaveProblems”).jqxButton({ width: 80, theme: jqxTheme2, disabled: true });
$(“#btnCancelProblems”).jqxButton({ width: 80, theme: jqxTheme2, disabled: false });
}
});

$(‘#psTree’).jqxTree({ height: ’450px’, width: ’530px’, checkboxes: true, theme: jqxTheme2 });
$(“#problemSelector”).jqxWindow({ title: ‘Functional problems’ });
$(“#problemSelector”).jqxWindow(‘open’);

});

[DimitarParticipant]

Hello Mihai,

Please move the tree initialization in the window’s initContent callback function. That is the proper way of initializing widgets in jqxWindow.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts