How to adjust angular-gridster to remove Z-layers and overlay images on each other? Now, if the images are large, they overlap.

Settings seem to be in $scope.gridOpts . And still does not work resizable: { enabled : false } , you can still stretch the image.

There is an official demo example , there resizing is somehow disabled.

My current settings:

 $scope.gridsterOpts = { margins: [20, 20], outerMargin: false, floating: true, pushing: true, draggable: { enabled: true }, resizable: { enabled: false, handles: ['n', 'e', 's', 'w', 'se', 'sw'] } }

It is necessary that the images do not overlap; their real size was taken into account, and they were simply located side by side; so that it is not possible to resize by stretching the image around the corner. And there was the possibility of moving. Now the images are moving normally, but they overlap each other, and the resize is still available.

Update: After adding a div to the html block, in which all images are located, the options <div gridster="gridsterOpts"> resize turned off. There remained the problem of overlapping images.

  • one
    The essence of the question is incomprehensible, I can not find the problem being described: jsfiddle - vp_arth
  • one
    <div gridster="gridsterOpts" ng-init="selected = {}"> <ul> <li gridster-item="item" ng-repeat="item in standardItems" ng-click="selected.item = item" ng-style="{ 'z-index': selected.item === item ? 999 : '' }"></li> </ul> </div> - Vanya Avchyan
  • one
    Just reload the gridster z-index when the widgets are not in a drag state: .gridster-item:not(.gridster-item-moving) { //drop z-index to make it possible to set higher than 2 z-index for widget elements z-index: initial; } .gridster-item:not(.gridster-item-moving) { //drop z-index to make it possible to set higher than 2 z-index for widget elements z-index: initial; } - Vanya Avchyan
  • @VanyaAvchyan please make your comment as an answer - Alexandr Tovmach

1 answer 1

Reply @VanyaAvchyan

configuration

 $scope.gridsterOpts = { margins: [20, 20], outerMargin: false, floating: true, pushing: true, draggable: { enabled: true }, resizable: { enabled: false, handles: ['n', 'e', 's', 'w', 'se', 'sw'] } }

view

 <div gridster="gridsterOpts" ng-init="selected = {}"> <ul> <li gridster-item="item" ng-repeat="item in standardItems" ng-click="selected.item = item" ng-style="{ 'z-index': selected.item === item ? 999 : '' }"></li> </ul> </div>

styles

 .gridster-item:not(.gridster-item-moving) { z-index: initial; /* drop z-index to make it possible to set higher than 2 z-index for widget elements */ }