jQWidgets Forums

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

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

Author

jqxRibbon and jqxSplitter Posts

May 27, 2015 at 11:15 am jqxRibbon and jqxSplitter #71642

badera

Participant

Dear all

I encountered a problem using jqxRibbon in jqxSplitter. I also use fluid size: If the ‘position’ is ‘top’ or ‘left’, the content of the active ribbon is overlapped by the header. The following minimal example shows the problem:


<!DOCTYPE html>
<html ng-app="demoApp" style="height:100%">
<head>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.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="../../jqwidgets/jqx-all.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);
        demoApp.controller("demoController", function ($scope) {

            $scope.splitterSettings = {
                width: "100%",
                height: "100%",
                orientation: 'horizontal',
                splitBarSize: 3,
                panels: [
                    {size: '40%', collapsible: false},
                    {size: '60%', collapsible: true}
                ]
            };

            $scope.jqxRibbonSettings = {
                width: '100%',
                height: '100%',
                position: 'left',
                selectionMode: 'click'
            };
        });
    </script>
</head>

<body style="height:calc(100% - 20px)">
<div ng-controller="demoController" style="height:100%">
    <div style="height:calc(100% - 20px); width:100%">
        <jqx-splitter jqx-settings="splitterSettings">
            <div>
                Top...
            </div>
            <div>
                <jqx-ribbon jqx-settings="jqxRibbonSettings">
                    <ul>
                        <li>First</li>
                        <li>Second</li>
                        <li>Third</li>
                    </ul>
                    <div>
                        <div>
                            This is the first Ribbon
                        </div>
                        <div>
                            And this one is the second...
                        </div>
                        <div>
                            Here, we are on the last one...
                        </div>
                    </div>
                </jqx-ribbon>
            </div>
        </jqx-splitter>
    </div>
</div>
</body>
</html>

What am I doing wrong?
Thanks in advance for any help!
– badera

PS: Strange; I already posted this topic some hours ago and suddenly it has been removed… strange…

May 27, 2015 at 11:27 am jqxRibbon and jqxSplitter #71643

Peter Stoev

Keymaster

Hi badera,

Your Topic was removed because it’s posted in wrong forum. Please, post your future AngularJS related posts in the AngularJS Forum.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

May 27, 2015 at 11:39 am jqxRibbon and jqxSplitter #71645

badera

Participant

Dear Peter

OK, I create a copy of the new topic in AngularJS Forum… But I am not sure, if we do not have the same issue, if we use the widgets in non angular usage. And how can I know that?

May 27, 2015 at 12:09 pm jqxRibbon and jqxSplitter #71651

Peter Stoev

Keymaster

Hi badera,

People who don’t know AngularJS will not understand your code so as this code is using AngularJS, it should be in the AngularJS Forum.

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.