Issue with min-width

[Exotelis]

I need to assign a min-width value to my widgets, but this is causing some troubles.

I'am using the style option:

size: { width: '50%' } style: { minWidth: '270px' }

It seems to be working, but if you are going to resize your widget to a smaller size, the width attribute will decrease over and over again. Use the inspector to see this phenomenon.

I've fixed this issue by overwriting the DashboardWidgetCtrl and editing the grabResize function. Here is my code:

var mouseup = function(e) {
    // remove listener and marquee
    jQuery($window).off('mousemove', mousemove);
    $marquee.remove();

    // calculate change in units
    var curX = e.clientX;
    var pixelChange = curX - initX;
    var unitChange = Math.round(pixelChange * transformMultiplier * 100) / 100;
    // add to initial unit width
    var newWidth = unitWidth * 1 + unitChange;
    // new part starts
    if(typeof widget.containerStyle.minWidth !== 'undefined') {
        if ((pixelWidth + pixelChange) < parseFloat(widget.containerStyle.minWidth)) {
            newWidth = parseFloat(widget.containerStyle.minWidth);
            widthUnits = widget.containerStyle.minWidth.replace(/^[-\.\d]+/, '') || '%';
        }
    }
    if(widthUnits === 'px') {
        var dashboardSize = widgetElm.parent().parent().width();
        newWidth = Math.min(dashboardSize, newWidth);
    }
    // new part ends
    widget.setWidth(newWidth, widthUnits);
    $scope.$emit('widgetChanged', widget);
    $scope.$apply();
    $scope.$broadcast('widgetResized', {
        width: newWidth
    });
};

Is there a better way to fix this?
Maybe a minsize option would be great.

[Exotelis]

Hmm bug in my own code detected, need to fix that on monday. Resizing the browser casuing issues.

Maybe we need to watch
window.innerWidth

[andyperlitch]

@Exotelis let me know if it turns out to be a bug in your code. I'd be happy to help out otherwise.

[Exotelis]

Ok, thats my new mouseup function

var mouseup = function(e) {
    // remove listener and marquee
    jQuery($window).off('mousemove', mousemove);
    $marquee.remove();

    // calculate change in units
    var curX = e.clientX;
    var pixelChange = curX - initX;
    var unitChange = Math.round(pixelChange * transformMultiplier * 100) / 100;
    // add to initial unit width
    var newWidth = unitWidth * 1 + unitChange;

    // new 
    if(typeof widget.containerStyle.minWidth !== 'undefined') {
        var dashboardSize = widgetElm.parent().parent().width();
        var minWidth = parseFloat(widget.containerStyle.minWidth);
        var units = widget.containerStyle.minWidth.replace(/^[-\.\d]+/, '') || '%';
        var minWidthPx;
        var minWidthPercent;

        switch(units) {
            case '%':
                minWidthPx = minWidth / 100 * dashboardSize;
                minWidthPercent = minWidth;
                break;
            case 'px':
                minWidthPx = minWidth;
                minWidthPercent = minWidth / dashboardSize * 100;
                break;
        }

        if((pixelWidth + pixelChange) < minWidthPx) {
            if(widthUnits === '%') {
                newWidth = minWidthPercent;
            } else {
                newWidth = minWidthPx;
            }
        }
    }
    // new

    widget.setWidth(newWidth, widthUnits);
    $scope.$emit('widgetChanged', widget);
    $scope.$apply();
    $scope.$broadcast('widgetResized', {
        width: newWidth
    });
};

With one Exception, 'width' cannot be less than 'min-width'. The Exception is to resize your browser. Adding the following watcher will fix this issue.

if(typeof $scope.widget.containerStyle.minWidth !== 'undefined') {
    $scope.$watch(function () {
        return {
            'w': window.innerWidth
        };
    }, function () {
        var widget = $scope.widget;
        var widgetElm = $element.find('.widget');
        var units = widget.containerStyle.minWidth.replace(/^[-\.\d]+/, '') || '%';

        if (units !== '%') {
            var dashboardSize = widgetElm.parent().parent().width();
            var minWidthPx = parseFloat(widget.containerStyle.minWidth);
            var widthUnits = widget.widthUnits;
            var minWidthPercent = parseFloat(widget.containerStyle.minWidth) / dashboardSize * 100;

            if (widgetElm.width() < minWidthPx) {
                if (widthUnits === '%') {
                    var newWidth = minWidthPercent;
                } else {
                    var newWidth = minWidthPx;
                }
                widget.setWidth(newWidth, widthUnits);
            }
        }
    }, true);
}

Is there a better way to keep my dashboard responsive?

[wvary]

@Exotelis Just confirmed the issue with resizing:

1. minWidth is not being applied correctly when the width and minWidth units are different.
   It does apply correctly if both are the same.
2. When applying the minWidth setting, the display shows the event with instead of the actual width being render

Will update the code to resolve both issue. I'm sorry for the late response.