jQWidgets Forums

This topic contains 2 replies, has 2 voices, and was last updated by boardofpowder 12 years, 1 month ago.

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

Author

Splitter stops working with v2.9 Posts

July 4, 2013 at 4:38 am Splitter stops working with v2.9 #24446

Participant

Hi guys,

I built a demo page to sort out how to make a nested splitter. It works great with jqxWidgets v2.7, but when I upgraded to 2.9, the middle horizontal stacks disappear. I can send you screen shots if you need to see them. I reviewed the API for jqxSplitter and I can’t see a reason for it to have stopped working.

Any chance that you can have a look and let me know if I’m missing something?

Thanks.


<!DOCTYPE html><html lang="en"><head>
    <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
    <title id='Description'>This demonstration shows a complex layout implementation that
        shows nesting multiple splitters.</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = 'default';
            $('#mainSplitter').jqxSplitter({ theme: theme, width: 600, height: 600, orientation: 'vertical', panels: [{ size: 400, collapsible: false}] });
            $('#firstNested').jqxSplitter({ width: '100%', height: '100%', theme: theme, orientation: 'vertical', panels: [{ size: 200, collapsible: false}] });
            $('#thirdNested').jqxSplitter({ width: '100%', height: '100%', theme: theme, orientation: 'horizontal', panels: [{ size: 300, collapsible: false}] });
        });
    </script></head>
    <body class='default'>
    <div id="mainSplitter">
        <div>
            <div id="firstNested">
                <div><span>Panel 3</span></div>
                <div>
                    <div id="secondNested">
                        <div>
                            <div id="thirdNested">
                                <div>
                                    <span>Panel 4</span>
                                </div>
                                <div style="height:300px;">
                                    <span>Panel 5</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
        </div>
    </div>
    </body>
</html>

July 4, 2013 at 4:43 am Splitter stops working with v2.9 #24447

Peter Stoev

Keymaster

Hi,

You may look at the Release Notes before upgrading to a new version. In addition, in the HTML the “secondNested” is missing an additional DIV tag for its second panel. Each Splitter instance should have its own DIV tag and 2 nested DIV tags. Also you should not set Layout properties such as width or height in the CSS when you initialize the Splitter widget.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 4, 2013 at 1:07 pm Splitter stops working with v2.9 #24504

boardofpowder

Participant

Ah yes, that makes sense. I’ve made the changes you suggested and it works now. For anyone reading, this is the resulting code that works perfectly.

Thanks Peter!

<!DOCTYPE html><html lang="en"><head>
    <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
    <title id='Description'>This demonstration shows a complex layout implementation that
        shows nesting multiple splitters.</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = 'default';
            $('#mainSplitter').jqxSplitter({ theme: theme, width: 600, height: 600, orientation: 'vertical', panels: [{ size: 400, collapsible: false}] });
            $('#firstNested').jqxSplitter({ width: '100%', height: '100%', theme: theme, orientation: 'vertical', panels: [{ size: 200, collapsible: false}] });
            $('#thirdNested').jqxSplitter({ width: '100%', height: '100%', theme: theme, orientation: 'horizontal', panels: [{ size: 300, collapsible: false}] });
        });
    </script></head>
    <body class='default'>
    <div id="mainSplitter">
        <div>
            <div id="firstNested">
                <div><span>Panel 3</span></div>
                <div>
                    <div id="thirdNested">
                        <div>
                            <span>Panel 4</span>
                        </div>
                        <div>
                            <span>Panel 5</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <span>Panel 6</span>
        </div>
    </div>
    </body>
</html>

Author

Posts

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

You must be logged in to reply to this topic.