Closed sergibondarenko closed 6 years ago
I create a clone of this demo https://rawgit.com/ManifestWebDesign/angular-gridster/master/index.html#/dashboard
Now my widgets stretched to the full width and they don't have drag or resize properties. I don't have errors in the browser dev console. What do I miss here?
My app structure:
d- app - app.js d- templates - widget_settings.html d- style - style.css - index.html
index.html
<!DOCTYPE html> <html> <head> <title>Angular Dashboard App</title> <meta charset="utf-8"> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="node_modules/angular-gridster/dist/angular-gridster.min.css" /> <link rel="stylesheet" href="style/style.css" /> </head> <script src="node_modules/angular/angular.min.js"></script> <script src="node_modules/angular-ui-bootstrap/ui-bootstrap-tpls.min.js"></script> <script src="node_modules/angular-gridster/dist/angular-gridster.min.js"></script> <body> <div ng-app="dashboardApp" ng-controller="DashboardCtrl"> <h1>{{greet}}</h1> <div class="page-header"> <a class="pull-right btn btn-primary" ng-click="addWidget()"><i class="glyphicon glyphicon-plus"></i> Add Widget</a> <a class="pull-right btn btn-warning" ng-click="clear()"><i class="glyphicon glyphicon-trash"></i> Clear</a> <h1 style="display: inline-block; width: 200px;">Dashboard</h1> <select class="form-control" style="width: 150px; margin-bottom: 20px; display:inline-block;" ng-change="changeDashboard()" ng-model="selectedDashboardId" ng-options="d.id as d.name for d in dashboards | object2Array | orderBy:'id'"> </select> </div> <div gridster="gridsterOptions"> <ul> <li gridster-item="widget" ng-repeat="widget in dashboard.widgets"> <div class="box" ng-controller="CustomWidgetCtrl"> <div class="box-header"> <h3>{{ widget.name }}</h3> <div class="box-header-btns pull-right"> <a title="settings" ng-click="openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a> <a title="Remove widget" ng-click="remove(widget)"><i class="glyphicon glyphicon-trash"></i></a> </div> </div> <div class="box-content"> </div> </div> </li> </ul> </div> </div> <script src="app/app.js"></script> </body> </html>
app/app.js
var app = angular.module('dashboardApp', ['ui.bootstrap']); app.controller('DashboardCtrl', ['$scope', '$timeout', function($scope, $timeout) { $scope.gridsterOptions = { margins: [20, 20], columns: 4, draggable: { handle: 'h3' } }; $scope.dashboards = { '1': { id: '1', name: 'Home', widgets: [{ col: 0, row: 0, sizeY: 1, sizeX: 1, name: "Widget 1" }, { col: 2, row: 1, sizeY: 1, sizeX: 1, name: "Widget 2" }] }, '2': { id: '2', name: 'Other', widgets: [{ col: 1, row: 1, sizeY: 1, sizeX: 2, name: "Other Widget 1" }, { col: 1, row: 3, sizeY: 1, sizeX: 1, name: "Other Widget 2" }] } }; $scope.clear = function() { $scope.dashboard.widgets = []; }; $scope.addWidget = function() { $scope.dashboard.widgets.push({ name: "New Widget", sizeX: 1, sizeY: 1 }); }; $scope.$watch('selectedDashboardId', function(newVal, oldVal) { if (newVal !== oldVal) { $scope.dashboard = $scope.dashboards[newVal]; } else { $scope.dashboard = $scope.dashboards[1]; } }); // init dashboard $scope.selectedDashboardId = '1'; } ]); app.controller('CustomWidgetCtrl', ['$scope', '$modal', function($scope, $modal) { $scope.remove = function(widget) { $scope.dashboard.widgets.splice($scope.dashboard.widgets.indexOf(widget), 1); }; $scope.openSettings = function(widget) { $modal.open({ scope: $scope, templateUrl: 'templates/widget_settings.html', controller: 'WidgetSettingsCtrl', resolve: { widget: function() { return widget; } } }); }; } ]); app.controller('WidgetSettingsCtrl', ['$scope', '$timeout', '$rootScope', '$modalInstance', 'widget', function($scope, $timeout, $rootScope, $modalInstance, widget) { $scope.widget = widget; $scope.form = { name: widget.name, sizeX: widget.sizeX, sizeY: widget.sizeY, col: widget.col, row: widget.row }; $scope.sizeOptions = [{ id: '1', name: '1' }, { id: '2', name: '2' }, { id: '3', name: '3' }, { id: '4', name: '4' }]; $scope.dismiss = function() { $modalInstance.dismiss(); }; $scope.remove = function() { $scope.dashboard.widgets.splice($scope.dashboard.widgets.indexOf(widget), 1); $modalInstance.close(); }; $scope.submit = function() { angular.extend(widget, $scope.form); $modalInstance.close(widget); }; } ]); // helper code app.filter('object2Array', function() { return function(input) { var out = []; for (i in input) { out.push(input[i]); } return out; } });
style/style.css
.controls { margin-bottom: 20px; } .page-header { margin-top: 20px; } ul { list-style: none; } .box { height: 100%; border: 1px solid #ccc; background-color: #fff; } .box-header { background-color: #eee; padding: 0 30px 0 10px; border-bottom: 1px solid #ccc; cursor: move; position: relative; } .box-header h3 { margin-top: 10px; display: inline-block; } .box-content { padding: 10px; } .box-header-btns { top: 15px; right: 10px; cursor: pointer; position: absolute; } a { color: #ccc; } form { margin-bottom: 0; } .gridster { border: 1px solid #ccc; }
Duplicate of https://github.com/ManifestWebDesign/angular-gridster/issues/491
I create a clone of this demo https://rawgit.com/ManifestWebDesign/angular-gridster/master/index.html#/dashboard
Now my widgets stretched to the full width and they don't have drag or resize properties. I don't have errors in the browser dev console.
What do I miss here?
My app structure:
index.html
app/app.js
style/style.css