setting minimum width and height for each gridster.js widget

Question

I'm using gridster.js combined with Jquery UI to make it resizable by dragging using this bit:

$('.layout_block').resizable({
    grid: [grid_size + (grid_margin * 2), grid_size + (grid_margin * 2)],
    animate: false,
    minWidth: grid_size,
    minHeight: grid_size,
    containment: '#layouts_grid ul',
    autoHide: true,
    stop: function(event, ui) {
        var resized = $(this);
        setTimeout(function() {
            resizeBlock(resized);
        }, 300);
    }
});

$('.ui-resizable-handle').hover(function() {
    layout.disable();
}, function() {

    layout.enable();
});

function resizeBlock(elmObj) {

    var elmObj = $(elmObj);
    var w = elmObj.width() - grid_size;
    var h = elmObj.height() - grid_size;

    for (var grid_w = 1; w > 0; w -= (grid_size + (grid_margin * 2))) {

        grid_w++;
    }

    for (var grid_h = 1; h > 0; h -= (grid_size + (grid_margin * 2))) {

        grid_h++;
    }

    layout.resize_widget(elmObj, grid_w, grid_h);
}

as suggested on GitHub:

http://jsfiddle.net/maxgalbu/UfyjW/

I need to specify minimum width and height for each widget and not for gridster genrally.

Is there an obvious way to achieve this functionality?

Thanks

Daisey

Answer 1

If it help anyone, I managed a solution:

Added a data-attribute to each widget to specify minimum X and Y:

data-minx="2" data-miny="2" 

And then rewrote the resize function:

$('.layout_block').resizable({
    grid: [grid_size + (grid_margin * 2), grid_size + (grid_margin * 2)],
    animate: false,
    containment: '#layouts_grid ul',
    autoHide: true,
    start: function(event, ui) {
        var resized = $(this);
        $('.layout_block').resizable( "option", "minWidth", resized.data('minx') * grid_size );
        $('.layout_block').resizable( "option", "minHeight", resized.data('miny') * grid_size );
    },
    stop: function(event, ui) {
        var resized = $(this);
        setTimeout(function() {
            resizeBlock(resized);   
        }, 300);
    }
});

Instead of setting a minimum height and width I run a function on resizable start

that gets the minx and miny attributes and adjusts the parameters for resizing accordingly.

Daisey

In the current version (0.7.0) you can use data-max-sizex, data-max-sizey, data-min-sizex and data-min-sizey HTML attributes. – Laconism

Answer 2

Since version 0.2.1 you can use the build-in resize functionality to make the widgets resizable.

Although not documented, you can use resize.min_size to specify the minimum size of the widgets. resize.max_size is documented and works the same.

example:

resize: {
    enabled: true,
    min_size: [4, 4]
}

Cipolin

Yes but that's not per widget, that's for the whole grid. – Damiano