jqxRibbon and jqxSplitter - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: angularjs ribbon, jquery ribbon, jqwidgets ribbon

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

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

Author

jqxRibbon and jqxSplitter Posts

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

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

May 27, 2015 at 12:31 pm jqxRibbon and jqxSplitter #71655

Peter Stoev

Keymaster

Hi badera,

The issue here is that the Ribbon should be created when the Splitter is already created. Otherwise, the layout will be broken as in your case.

Example:

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id="Description">jqxSplitter directive for AngularJS</title>
    <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/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxribbon.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.js"></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
    </style>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);

        demoApp.controller("demoController", function ($scope) {
            $scope.createRibbon = false;
            $scope.splitterSettings = {
                width: '100%', height: '100%', orientation: 'vertical', panels: [{ size: 200 }],
                initContent: function () {
                    $scope.createRibbon = true;
                }
            };
            $scope.ribbonSettings = { width: '100%', height: '100%', position: "left" };

        });
    </script>
</head>
<body>
    <div style="width:100%;height:100%;" ng-controller="demoController">
        <jqx-splitter style="border:none;" jqx-settings="splitterSettings">
            <div>Panel 1</div>
            <div>
                <jqx-ribbon jqx-create="createRibbon" style="border:none;" jqx-settings="ribbonSettings">
                  <ul>
                      <li>Panel1</li>
                      <li>Panel2</li>
                  </ul>
                    <div>
                      <div>Panel 2</div>
                    <div>Panel 3</div></div>
                </jqx-ribbon>
            </div>
       </jqx-splitter>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

May 27, 2015 at 12:43 pm jqxRibbon and jqxSplitter #71656

badera

Participant

Dear Peter

Thanks for your constructive feedback.
I just remarked, that it also ‘works’, if we set a ‘width’ in the


...
<ul style="width: 200px">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>
...

Should I even prefer your version or is there a good reason, why setting the width of the header also does the job?

May 28, 2015 at 6:16 am jqxRibbon and jqxSplitter #71699

Peter Stoev

Keymaster

Hi badera,

That will do the job due to the reason that if the ribbon is created before the splitter, the ribbon’s real width will be 0px as it is 100% of container with 0px width i.e it’s header will be 0px and its content will be 100%. This means that the content will be positioned with “left” = 0px. When the ribbon is created after the splitter, the content will be positioned with “left” = the ribbon’s header’s width. If you put 200px width, the content always will be positioned with “left” = “200px” which solves the issue, too.

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.