jQuery UI Widgets Forums Plugins AngularJS jqxRibbon and jqxSplitter

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • 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

    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

    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

      Tag; so if I take my first snippet and set:

      
      ...
      <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?

    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

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

You must be logged in to reply to this topic.