jQWidgets Forums

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

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

Author

multiple jqx-editors in different jqx-tab pages Posts

January 22, 2015 at 7:18 pm multiple jqx-editors in different jqx-tab pages #65864

badera

Participant

Dear jqWidgets team

I need a jqx-tab with 5 tabs and in every tab an independent jqx-editor. It basically works, but only the first editor behaves exactly as wanted; the others have a much smaller input area, even though the settings are identical:

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id='Description'>jqxWindow Directive for AngularJS.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css"/>
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqx-all.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) {

            $scope.textA = "Text A...";
            $scope.textB = "Text B...";
            $scope.textC = "Text C...";
            $scope.textD = "Text D...";
            $scope.textE = "Text E...";

            $scope.jqxTabsSettings = {
                width: '800',
                height: '500',
                initTabContent: function () {
                    $scope.editorSettingsA = {
                        width: '100%',
                        height: '100%'
                    };
                    $scope.editorSettingsB = {
                        width: '100%',
                        height: '100%'
                    };
                    $scope.editorSettingsC = {
                        width: '100%',
                        height: '100%'
                    };
                    $scope.editorSettingsD = {
                        width: '100%',
                        height: '100%'
                    };
                    $scope.editorSettingsE = {
                        width: '100%',
                        height: '100%'
                    };
                }
            };

        });

    </script>
</head>
<body class='default'>
<div ng-controller="demoController">
    <jqx-tabs jqx-settings="jqxTabsSettings" jqx-create="jqxTabsSettings">
        <ul>
            <li>Tab 1</li>
            <li>Tab 2</li>
            <li>Tab 3</li>
            <li>Tab 4</li>
            <li>Tab 5</li>
        </ul>
        <div>
            <jqx-editor ng-model="textA" jqx-create="editorSettingsA" jqx-settings="editorSettingsA"></jqx-editor>
        </div>
        <div>
            <jqx-editor ng-model="textB" jqx-create="editorSettingsB" jqx-settings="editorSettingsB"></jqx-editor>
        </div>
        <div>
            <jqx-editor ng-model="textC" jqx-create="editorSettingsC" jqx-settings="editorSettingsC"></jqx-editor>
        </div>
        <div>
            <jqx-editor ng-model="textD" jqx-create="editorSettingsD" jqx-settings="editorSettingsD"></jqx-editor>
        </div>
        <div>
            <jqx-editor ng-model="textE" jqx-create="editorSettingsE" jqx-settings="editorSettingsE"></jqx-editor>
        </div>
    </jqx-tabs>
</div>
</body>
</html>

What is wrong? Why this huge gray block below the input area?

At the end, this tab with these five editors need to go into a jqx-window; however this should no more be a problem, if thisone here will work correctly.

Thank you in advance for your help.
– badera

January 23, 2015 at 5:38 am multiple jqx-editors in different jqx-tab pages #65868

Peter Stoev

Keymaster

Hi badera,

The way initTabContent is used in your code is incorrect. See: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/angularjs-tabs-integration.htm?arctic to learn how to use jQWidgets Tabs with Widgets inside the Tabs.

Best Regards,
Peter Stoev

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

January 23, 2015 at 6:23 am multiple jqx-editors in different jqx-tab pages #65874

badera

Participant

Dear Peter

Thank you pointing me to this. It is clear now.
The fixed sample:

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id='Description'>jqxWindow Directive for AngularJS.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css"/>
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqx-all.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) {

            $scope.textA = "Text A...";
            $scope.textB = "Text B...";
            $scope.textC = "Text C...";
            $scope.textD = "Text D...";
            $scope.textE = "Text E...";

            $scope.jqxTabsSettings = {
                width: '800',
                height: '500',
                initTabContent: function (tab) {
                    switch(tab) {
                        case 0:
                            $scope.editorSettingsA = {
                                width: '100%',
                                height: '100%'
                            };
                            break;
                        case 1:
                            $scope.editorSettingsB = {
                                width: '100%',
                                height: '100%'
                            };
                            break;
                        case 2:
                            $scope.editorSettingsC = {
                                width: '100%',
                                height: '100%'
                            };
                            break;
                        case 3:
                            $scope.editorSettingsD = {
                                width: '100%',
                                height: '100%'
                            };
                            break;
                        case 4:
                            $scope.editorSettingsE = {
                                width: '100%',
                                height: '100%'
                            };
                            break;
                    }
                }
            };

        });

    </script>
</head>
<body class='default'>
<div ng-controller="demoController">
    <jqx-tabs jqx-settings="jqxTabsSettings" jqx-create="jqxTabsSettings">
        <ul>
            <li>Tab 1</li>
            <li>Tab 2</li>
            <li>Tab 3</li>
            <li>Tab 4</li>
            <li>Tab 5</li>
        </ul>
        <div>
            <jqx-editor ng-model="textA" jqx-create="editorSettingsA" jqx-settings="editorSettingsA"></jqx-editor>
        </div>
        <div>
            <jqx-editor ng-model="textB" jqx-create="editorSettingsB" jqx-settings="editorSettingsB"></jqx-editor>
        </div>
        <div>
            <jqx-editor ng-model="textC" jqx-create="editorSettingsC" jqx-settings="editorSettingsC"></jqx-editor>
        </div>
        <div>
            <jqx-editor ng-model="textD" jqx-create="editorSettingsD" jqx-settings="editorSettingsD"></jqx-editor>
        </div>
        <div>
            <jqx-editor ng-model="textE" jqx-create="editorSettingsE" jqx-settings="editorSettingsE"></jqx-editor>
        </div>
    </jqx-tabs>
</div>
</body>
</html>

Best regards,
– badera

Author

Posts

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

You must be logged in to reply to this topic.