Tabs created on detached element is not rendered properly after attaching to DOM - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: DOM, element, initialization, initialize, jqxTabs, render, Tabs

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

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

Author

Tabs created on detached element is not rendered properly after attaching to DOM Posts

July 16, 2013 at 1:20 pm Tabs created on detached element is not rendered properly after attaching to DOM #25247

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>

July 17, 2013 at 6:03 am Tabs created on detached element is not rendered properly after attaching to DOM #25300

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/

July 17, 2013 at 6:37 am Tabs created on detached element is not rendered properly after attaching to DOM #25302

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/

Author

Posts

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

You must be logged in to reply to this topic.