jQuery UI Widgets Forums Navigation Tree Checkboxes misaligned when using jqxTree in a jqxWindow

This topic contains 2 replies, has 2 voices, and was last updated by  Dimitar 9 years, 11 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • mihaisinger
    Participant

    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


    mihaisinger
    Participant

    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’);
    
    });
    

    Dimitar
    Participant

    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/

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.