0

I'm struggling for already a couple of days to get a very basic layout using JQuery UI Layout (downloaded from here).

Following is the ng-includeed page:

<div id="Main_Working_Page" ng-controller="Main_Working_Page_Controller" style="height:100%;">

    <div id="Muti_Panel" style="height:100%">

        <div class="ui-layout-north">
            This is the north pane
        </div>

        <div class="ui-layout-west">
            This is the north west
        </div>

        <div id="tabs-center" class="ui-layout-center no-scrollbar add-padding grey">

            This is the central panel

        </div>

    </div>

</div>

and here is the controller for this page:

MyApp.controller('Main_Working_Page_Controller' , ['$rootScope' , '$scope' ,  'DB_Services' , function( $rootScope , $scope , DB_Services) {

    console.log(">>> Started Main_Working_Page_Controller") ;

    var Main_Page_Layout = $("#Muti_Panel").layout(
        {
            defaults: {
                fxName              :   "slide"     ,
                fxSpeed             :   "slow"      ,
                spacing_closed      :   14          ,
                initClosed          :   false       ,
                size                :   "200"       ,
                spacing_open        :   6           ,
                spacing_closed      :   6 
            }    ,

            applyDefaultStyles      :   true        ,

            north: {
                fxName              :   "slide"     ,
                spacing_closed      :   8           ,
                togglerLength_closed:   "100%"      ,
                closable            :   true        ,
                resizable           :   true        ,
                slidable            :   true        ,
                initClosed          :   false       ,
                initHidden          :   false       ,
                size                :   100         ,
                autoResize          :   false

            }    ,
            south: {
                fxName              :   "slide"     ,
                spacing_closed      :   8           ,
                togglerLength_closed:   "100%"      ,
                closable            :   true        ,
                resizable           :   true        ,
                slidable            :   true        ,
                initClosed          :   false       ,
                initHidden          :   false       ,
                size                :   100         ,
                autoResize          :   false 
            }    ,
            east: {
                fxName              :   "slide"     ,
                spacing_closed      :   15          ,
                togglerLength_closed:   "100%"      ,
                closable            :   true        ,
                resizable           :   true        ,
                slidable            :   true        ,
                initClosed          :   false       ,
                initHidden          :   false       ,
                size                :   300         ,
                autoResize          :   false
            }    ,
            center: {
                fxName              :   "slide"     ,
                closable            :   false       ,
                size                :   300
            }
        }
    ) ;

    Main_Page_Layout.resizeAll() ;

}]) ;

The page appears blank (nothing at all!!!) and the only way to see something is to enter the debug mode in Chrome and change some of the ...location:absolute... into ...location:relative.... When doing that, the layout is still far from what I want, but at least is visible.

Either I am missing something really fundamental in the way UI Layout needs to be used or there is a conflict with AngularJS.

FDavidov
  • 3,505
  • 6
  • 23
  • 59
  • 1
    *"[...] there is a conflict with AngularJS"* => Well, you should probably not use a jQuery library with AngularJS. So if you can change, change. – Mistalis Mar 22 '17 at 12:40
  • If you could provide a plunker of fiddle, i could help you with the root cause – Pramod_Para Mar 22 '17 at 13:00
  • Not quite @Mistalis. There are plenty of site all around the world using both (AngularJS and JQuery), including other projects I've done in the past with no issues at all. My question is not about **JQuery** but **JQuery UI Layout**. – FDavidov Mar 22 '17 at 13:01
  • @Pramod_Para, thanks. It would not be simple for me since there are quite many libraries included (JQuery, Bootstrap, AngularJS) and, must shamefully confess, I never created a plunker of fiddler. If you have specific things in your mind to check, I can perform the checks and tell you what the results are. Can you? – FDavidov Mar 22 '17 at 13:04
  • We have used a lot of jquery in project along with angularJS, so using both should not be an issue – Pramod_Para Mar 22 '17 at 13:05
  • @Pramod_Para agree in reference to JQuery. My question was directed to **JQuery UI Layout** set of libraries. – FDavidov Mar 22 '17 at 13:07

0 Answers0