jQuery UI Widgets Forums Navigation Tabs Tabs created on detached element is not rendered properly after attaching to DOM

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

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

  • sletov
    Member

    Using jQWidgets v2.8.3

    When Tabs component created on a detached element (like in case of using Backbone/Marionette Region) components is not rendered properly after element is attached to the DOM.

    We are using Backbone, Marionette and observed the issue above. Is the any way to make widget aware about parent DOM after attaching.

    Thanks,
    Slava

    <!doctype html>
    <html lang="en">
    <head>
    <title>Test</title>
    <meta charset="utf-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <link rel="stylesheet" href="js/libs/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="js/libs/jqwidgets/styles/jqx.energyblue.css" type="text/css" />
    <script type="text/javascript" src="js/libs/less/less.min.js"></script>
    <script type="text/javascript" src="js/libs/jquery/jquery.js"></script>
    <script type="text/javascript" src="js/libs/jqwidgets/jqx-all.js"></script>
    <script type="text/javascript">
    if( !window.console ) console = {log: function(){}};
    $(document).ready(function () {
    var theme = "energyblue";
    $('#mainSplitter').jqxSplitter({ width: '100%', height: 850, theme: theme, panels: [{ size: '15%', min: 200 }, { size: '85%', min: 600}] });
    //$('#fecLayoutTabs').jqxTabs({ width: '100%', height: 850, position: 'top', theme: theme, animationType: 'fade', selectionTracker: true });
    var jQInstance = $('#fecLayoutTabs');
    jQInstance.remove();
    jQInstance.jqxTabs({ width: '100%', height: 850, position: 'top' });
    $('#jqxWidget').append(jQInstance);
    });
    </script>
    </head>
    <body>
    <div id="wrap">
    <div id="mainSplitter">
    <div class="splitter-panel" style="background-color:#cccccc;">
    <div id="lhs-menu-content"></div>
    </div>
    <div class="splitter-panel" style="background-color:#cccccc;">
    <div id="app-main-content">
    <div id='jqxWidget'>
    <div id='fecLayoutTabs'>
    <ul style="width: 100%;">
    <li>
    Tab 1
    </li>
    <li>
    Tab 2
    </li>
    <li>
    Tab 3
    </li>
    </ul>
    <div>Tab 1 content</div>
    <div>Tab 2 content</div>
    <div>Tab 3 content</div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>
    • This topic was modified 10 years, 10 months ago by  sletov.
    • This topic was modified 10 years, 10 months ago by  sletov.

    Dimitar
    Participant

    Hello sletov,

    As is the case with every widget, jqxTabs should be initialized from an element which is currently in the DOM. The following line of code:

    jQInstance.jqxTabs({ width: '100%', height: 850, position: 'top' });

    tries to initialize a tabs widget from an empty selection. This is not possible.

    Best Regards,
    Dimitar

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


    Dimitar
    Participant

    UPDATE: You may call the jqxTabs render method after the initialization to display the widget properly. E.g.:

    jQInstance.jqxTabs({ width: '100%', height: 850, position: 'top' });
    $('#jqxWidget').append(jQInstance);
    jQInstance.jqxTabs("render");

    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.