jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 7 months ago.

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

Author

jqxTabs control breaks other controls Posts

November 22, 2013 at 9:58 am jqxTabs control breaks other controls #33138

Participant

Hi!
The jqxTabs control breaks the jqxDateTimeInput and jqxComboBox when they placed into jqxWindow.
Browser: any

My example is here:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title> </title>
        <link rel="stylesheet" href="styles/jqx.base.css"/>
        <script type="text/javascript" src="scripts/jquery-1.10.2.min.js"> </script>
        <script type="text/javascript" src="scripts/jqx-all.js"> </script>
        <script type="text/javascript">
            $(document).ready(function () {
                function createWindow(tabs, input, combobox) {
                    $('#form').jqxWindow({
                        height: 400,
                        width: 400,
                        title: '',
                        resizable: true,
                        initContent: function () {
                            $('#form').find('.jqx-window-content')
                                .append(input.jqxDateTimeInput({ width: '100%' }))
                                .append(combobox.jqxComboBox({ width: '100%' }))
                                .append(tabs.jqxTabs({ width: 300, height: 200 }));
                        }
                    })
                }
                var tabs = $('<div><ul><li>First tab</li><li>Second tab</li></ul><div></div><div></div></div>');
                var input = $('<div>').css('margin-bottom', 5);
                var combobox = $('<div>').css('margin-bottom', 5);
                createWindow(tabs, input, combobox);
            });
        </script>
    </head>
    <body>
		<div id="form"><div></div></div>
    </body>
</html>

November 22, 2013 at 10:21 am jqxTabs control breaks other controls #33143

Peter Stoev

Keymaster

Hi Yuri Antipin,

The initialization is missing some required files like globalize.js and also for creating jqxTabs and using it along with other widgets, you may look at the http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtabs/integration.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 22, 2013 at 10:37 am jqxTabs control breaks other controls #33147

Yuri Antipin

Participant

Hi Peter Stoev,

It is just a simple example that demonstrates the bug.
My temporary solution:

        <script type="text/javascript">
            $(document).ready(function () {
                function createWindow(tabs, input, combobox) {
					input.jqxDateTimeInput({ width: '100%' });
					combobox.jqxComboBox({ width: '100%' });
					tabs.jqxTabs({ width: 300, height: 200 });
                    $('#form').jqxWindow({
                        height: 400,
                        width: 400,
                        title: '',
                        resizable: true,
                        initContent: function () {
                            $('#form').find('.jqx-window-content')
                                .append(input)
                                .append(combobox)
                                .append(tabs);
                        }
                    })
                }
                var tabs = $('<div><ul><li>First tab</li><li>Second tab</li></ul><div></div><div></div></div>');
                var input = $('<div>').css('margin-bottom', 5);
                var combobox = $('<div>').css('margin-bottom', 5);
                createWindow(tabs, input, combobox);
            });
        </script>

In this example everything works correctly. Why I can’t use the inline code?

Best Regards,
Yuri Antipin

November 22, 2013 at 11:15 am jqxTabs control breaks other controls #33148

Peter Stoev

Keymaster

Hi Yuri,

Widgets should be initialized from HTML elements which are part of the DOM. The posted code creates widgets in reversed order – you initialize them from HTML which is outside the DOM and after that you add the HTML to the DOM.

Here’s an update from me:

                   function createWindow(tabs, input, combobox) {
                       $('#form').jqxWindow({
                           height: 400,
                           width: 400,
                           title: 'Some Title',
                           resizable: true,
                           initContent: function () {
                               $('#form').find('.jqx-window-content')
                                   .append(input)
                                   .append(combobox)
                                   .append(tabs);
                               input.jqxDateTimeInput({ width: 300 });
                               combobox.jqxComboBox({ width: 300 });
                               tabs.jqxTabs({ width: 300, height: 200 });
                           }
                      });
                   }
                   var tabs = $('<div><ul><li>First tab</li><li>Second tab</li></ul><div></div><div></div></div>');
                   var input = $('<div>').css('margin-bottom', 5);
                   var combobox = $('<div>').css('margin-bottom', 5);
                   createWindow(tabs, input, combobox);

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.