Search code examples
javascriptcssangularjsangularjs-directivegridster

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

Solution

  • 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
    /// (...)
};