How to add grid for angular-gridster?

Question

How to add dynamic coordinate grid for angular-gridster?

My example http://jsfiddle.net/qqzvjvfx/24/

<div ng-app="someApp" ng-controller="someCtrl">
    <div gridster="gridsterOpts">
        <ul>
            <li class="" gridster-item="block" ng-repeat="block in sorted_blocks">
                <div class="panel panel-default">
                    <div class="panel-heading">{{ block.title }}</div>
                    <div class="panel-content image-responsive" 
                         ng-style="{'background-image':'url(' + block.image + ')'}"></div>
                </div>
            </li>
        </ul>
    </div>
</div>

Angular Controller:

angular.module('someApp', ['gridster']).controller('someCtrl', function ($scope, $http) {
    $scope.gridsterOpts = 
    {
        resizable: {
            enabled: true
        },
        columns: 4,
        rows: 16,
        minRows: 4,
        margins: [0,0],
        floating: false
    };
    $scope.sorted_blocks = [{
        id: 1,
        sizeX: 1,
        sizeY: 1,
        image: 'http://i.imgur.com/NI1Xm16.jpg',
        title: 'title1',
        row: 1,
        col: 2
    }, {
        id: 2,
        sizeX: 2,
        sizeY: 1,
        image: 'http://i.imgur.com/x6qmeUY.jpg',
        title: 'title2',
        row: 0,
        col: 0
    }];
});

Css:

.panel {
    display: flex;
    flex-flow: column wrap;
    height: 100%;
}

.panel .panel-content {
    flex-grow: 1;
}

.image-responsive {
    background-size: contain;
    background-repeat: no-repeat;
}

The width of gridster`s field are fixed - 4 columns, the height are dynamic, from 4 to 16 rows. I need to add grid under blocks, like this.

KyleMit · Accepted Answer · 2018-12-06 22:47:20Z

1

I found this codepen by Jason Delia, plugging it into your gridster works.

You'd have to change the background color of course, but it should do what you need:

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #434343;
  background-image: linear-gradient(#434343, #282828);
}

#content {
  background-color: transparent;
  background-image: linear-gradient(0deg,  transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), 
                    linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
  height: 100%;
  background-size: 50px 50px;
}

<div id="content"></div>

edited Dec 6, 2018 at 22:47

KyleMit♦

31.5k74 gold badges517 silver badges712 bronze badges

answered Dec 10, 2015 at 19:58

tacotuesday

1351 gold badge5 silver badges14 bronze badges

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

1 Comment

KyleMit Over a year ago

See Also: How to make a grid (like graph paper grid) with just css?

Collectives™ on Stack Overflow

How to add grid for angular-gridster?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related