Unable to set a maximum width and height as initial config or onResizeStop

[robertbarron]

So,

I am adding widgets to my dashboard. each widget has different settings and currently is working as I intented it to do it, with one only exception.

The only issue I have is that I am unable to set a maximum width and height for each widget.

I tried to block it setting a max-width and max-height with css but once the widget reach the maximum allowed with the css, the inline style overflow those settings and the resize button stops working.

I am trying to catch the event with the method onResizeStop, but I am unable (or I don't know how) to establish the width or height that I required as maximum.

Something like this:

HTML:

<section class="blotter-component" 
  [(ngGridItem)]="itemGridConfig" 
  [attr.widgetid]="widgetId" 
  (onChangeStop)="resizing($event)" 
>
 ...
</section>

Component:

resizing(event: NgGridItemEvent) {
    if (event.width > this.limits.maxW) {
      event.width = this.limits.maxW;
      this.itemGridConfig.sizex= 19;
    }
    if (event.height > this.limits.maxH) {
      event.height = this.limits.maxH;
      this.itemGridConfig.sizey = 17;
    }
  }

this.itemGridConfig is the gridItemConfiguration for each widget this.limits contains the limits for height and width.

Thank you

[BTMorton]

Currently, the only way to limit the maximum sizes of items in the grid is to set the max_cols/max_rows properties on the grid or the maxCols/maxRows properties on the items. It looks like that's basically what you're trying to achieve by setting sizex=19 and sizey=17 in your event handler, no?

Can I ask what the rest of your config looks like?

[robertbarron]

Hello,

Just to let you know that I'm a moron. Didn't read that part on the documentation. That's why it wasn't working.

I added the maxCols, maxRows / minCols, minRows and is working perfectly now.

My settings for the grid are this:

private gridConfig: NgGridConfig = <NgGridConfig>{
    draggable: true,
    resizable: true,
    max_cols: 39,
    max_rows: 0,
    visible_cols: 0,
    visible_rows: 0,
    min_cols: 1,
    min_rows: 1,
    col_width: 50,
    row_height: 50,
    cascade: 'left',
    min_width: 30,
    min_height: 50,
    fix_to_grid: true,
    auto_style: false,
    auto_resize: false,
    maintain_ratio: false,
    prefer_new: true,
    zoom_on_drag: false,
    limit_to_screen: true,
    margins: [5]
  };

For the items:

private gridDefault: NgGridItemConfig = {
    borderSize: 30,
    col: 1,
    dragHandle: ".dragHandler",
    draggable: true,
    fixed: false,
    height: 530,
    left: 5,
    maxCols: 15,
    maxRows: 15,
    minCols: 11,
    minRows: 8,
    payload: 4,
    resizable: true,
    resizeHandle: ".resizeHandler",
    row: 1,
    sizex: 11,
    sizey: 9,
    top: 5,
    width: 650,
  };

Thank you for an awesome library. I searched for several days a library that could work with dynamic components without luck, but this one worked like a charm.

Cheers!