JQuery Layout with AngularJS

Question

I have a simple page in which I am trying to use JQuery Layout plugin. The code is:

<!DOCTYPE html>
<html ng-app="app">

<head>
  <title>Layout Example</title>
</head>

<body>


    <div class="ui-layout-center">
      Angular test:
      <input type="text" ng-model="name" />{{name}}
    </div>
    <div class="ui-layout-north">North</div>
    <div class="ui-layout-south">South</div>
    <div class="ui-layout-east">East</div>
    <div class="ui-layout-west">West</div>


  <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
  <script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>

  <script type="text/javascript">
    var app = angular.module('app', []);

    app.directive('body', function() {
      return {
        restrict: 'E',
        link: function(scope, elm, attrs) {
          console.log("applying layout");

          elm.layout({
            applyDefaultStyles: true
          });
        }
      };
    });
  </script>

</body>

</html>

Now when I try to wrap the ui-layout-container, nothing appears on the screen. However I can see the full code of the layout in Web developer toolbar. The code is:

<!DOCTYPE html>
<html ng-app="app">

<head>
  <title>Layout Example</title>
</head>

<body>

  <div class="wrapper">
    <div class="ui-layout-center">
      Angular test:
      <input type="text" ng-model="name" />{{name}}
    </div>
    <div class="ui-layout-north">North</div>
    <div class="ui-layout-south">South</div>
    <div class="ui-layout-east">East</div>
    <div class="ui-layout-west">West</div>
  </div>

  <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
  <script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>

  <script type="text/javascript">
    var app = angular.module('app', []);

    app.directive('wrapper', function() {
      return {
        restrict: 'C',
        link: function(scope, elm, attrs) {
          console.log("applying layout");

          elm.layout({
            applyDefaultStyles: true
          });
        }
      };
    });
  </script>

</body>

</html>

So, it looks like I am unable to pass the class name correctly. What should be passed as class name to make it work? Thanks

EDIT: You can copy and paste the code in Plunker to see the problem.

Sylvain · Accepted Answer · 2014-02-28 03:52:42Z

1

You need a height on your wrapper:

<div class="wrapper" style="height:500px;">

I guess it works on <body> because <body> fills the page.

answered Feb 28, 2014 at 3:52

Sylvain

19.3k26 gold badges103 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chi Row · Accepted Answer · 2014-02-28 03:52:35Z

0

Not familiar with JS-Layout but it looks like it doesn't like wrapper div (or anyother wrapping element).

This may not be the answer you are looking for but you can set the class to the body and it will work.

http://plnkr.co/edit/l0ddGBcSZwTO18Q9RvBC

answered Feb 28, 2014 at 3:52

Chi Row

1,1067 silver badges18 bronze badges

Collectives™ on Stack Overflow

JQuery Layout with AngularJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related