CODEWITHSUNDEEP
javascriptcssangularjsangularjs-directivegridster
Shaya
Shaya

Reputation: 2932

Angular-gridster doesn't work on small screens

The problem

I noticed that angular-gridster stops working if the browser window is minimized to the point there's not much space around the gridster tiles (see image 2). However, gridster works alright when maximizing the window, and the elements are draggable and resizable again.

Progress

I modified the $scope.gridsterOpts object in the relevant controller and ensured that pushing, floating, swapping are all set to true, but that didn't solve the problem.

fiddle

In addition, I noticed that the same behavior could be found in this fiddle - the "result" window has to be pretty big in height/width so the demo would work.

I do not include my project code as I think it's useless since I see this behavior in every demo of angular-gridster.

Did anyone experienced the same problem? Thanks.

screenshot: working

screenshot: not working

Upvotes: 0

Views: 2434

Answers (2)

s.chandran sha
s.chandran sha

Reputation: 449

The mobileBreakPoint is one more important think. The value of mobileBreakPoint 600 it means it will take half of the width in the screen if we set div width more then 600px it will work.If we need for minimum div width we need to change mobileBreakPoint value based on div width

$scope.gridsterOpts = { mobileBreakPoint: 100, // if the screen is not wider that this,remove the grid layout and stack the items };

Upvotes: 1

Spiny Norman
Spiny Norman

Reputation: 8327

This seems to be by design. As you can see here, angular-gridster has a so-called "mobile mode", meaning the plugin will stop working below a certain (configurable) screen width:

$scope.gridsterOpts = {
    /// (...)
    isMobile: false, // stacks the grid items if true
    mobileBreakPoint: 600, // if the screen is not wider that this, remove the grid layout and stack the items
    mobileModeEnabled: true, // whether or not to toggle mobile mode when screen width is less than mobileBreakPoint
    /// (...)
};

Upvotes: 2

Related Questions