jQuery UI Widgets Forums General Discussions jqx-all.js is not working with jqxDockingLayout

This topic contains 6 replies, has 5 voices, and was last updated by  dadiduekappa 2 weeks, 6 days ago.

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

  • ted
    Participant

    Hi, I’m using the most recent version of jqx-all.js, v8.1.4, and it does not work with the following code, the error is ‘jqx-all.js:15 Uncaught Invalid property: width’. If I comment out the jqx-all.js include, and instead include the individual files, the code works fine.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id="Description">
            This demo shows the default functionality of the jqxDockingLayout
            widget. This control allows the creation of complex layouts with panels that can
            be floated, docked, nested, resized, pinned, unpinned and closed.
        </title>
        <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
        <style type="text/css">
            .jqx-layout-group-auto-hide-content-vertical {
                width: 200px;
            }
        </style>
        <script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqx-all.js"></script>
        <!--Uncomment code below and the page works.  The page does not work with jqx-all.js above, as the code breaks with error: 'Invalid property: width'-->
        <!--<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxribbon.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxlayout.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxdockinglayout.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxtree.js"></script>-->
        <script type="text/javascript">
            $(document).ready(function () {
                // the 'layout' JSON array defines the internal structure of the docking layout
                var layout = [{
                    type: 'layoutGroup',
                    orientation: 'horizontal',
                    items: [{
                        type: 'layoutGroup',
                        orientation: 'vertical',
                        width: '100%',
                        items: [{
                            type: 'documentGroup',
                            height: '50%',
                            minHeight: '20%',
                            items: [{
                                type: 'documentPanel',
                                title: 'Document 1',
                                contentContainer: 'Document1Panel'
                            }, {
                                type: 'documentPanel',
                                title: 'Document 2',
                                contentContainer: 'Document2Panel'
                            }]
                        }, {
                            type: 'tabbedGroup',
                            height: '50%',
                            pinnedHeight: '10%',
                            items: [{
                                type: 'layoutPanel',
                                title: 'Error List',
                                contentContainer: 'ErrorListPanel'
                            }, {
                                type: 'layoutPanel',
                                title: 'Output',
                                contentContainer: 'OutputPanel',
                                selected: true
                            }]
                        }]
                    }
                    ]
                }
                ]
    
                $('#dockingLayout').jqxDockingLayout({ width: 1000, height: 600, layout: layout });
            });
        </script>
    </head>
    <body>
        <div id="dockingLayout">
            <!--documentGroup-->
            <div data-container="Document1Panel">
                Document 1 content
            </div>
            <div data-container="Document2Panel">
                Document 2 content
            </div>
            <!--bottom tabbedGroup-->
            <div data-container="ErrorListPanel">
                List of errors
            </div>
            <!--floatGroup-->
            <div data-container="OutputPanel">
            </div>
        </div>
    </body>
    </html>

    Peter Stoev
    Keymaster

    Hi ted,

    Thanks for the feedback. We will fix it for the next update of our software.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    https://www.jqwidgets.com


    thesled
    Participant

    Bug is still there in version 8.3.2. Any idea when it will be fixed?


    admin
    Keymaster

    Hi thesled,

    We will post here: https://www.jqwidgets.com/jquery-widgets-documentation/documentation/releasehistory/releasehistory.htm as soon as the issue is fixed.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    https://www.jqwidgets.com


    dadiduekappa
    Participant

    Hi, any news on this?
    We have the same problem, the last version that works correctly is the version 6.

    Thanks


    admin
    Keymaster

    Hi dadiduekappa,

    For now, we would suggest using the individual references with jqxDockingLayout. We found what causes the problem with jqx-all.js and will fix with for our next month’s release.

    Regards,
    Peter


    dadiduekappa
    Participant

    Thanks.
    I inlcude jqx-all.js and after i re-include layout and dockinglayout in sequence.
    It works.

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

You must be logged in to reply to this topic.