Gridster within md-tabs

Hi again. I have the following code here:

`<md-tab-group [dynamicHeight]=“true” [selectedIndex]=“selectedDashboard” (selectChange)=“onTabChange($event)” [dynamicHeight]=“true”> <md-tab *ngFor=“let dashboard of dashboards; let i = index;” >

    <ng-template md-tab-label>
      {{dashboard.title}}
    </ng-template>

          <gridster [options]="gridsterOptions" [draggableOptions]="gridsterDraggableOptions" #gridster>
            <gridster-item [(x)]="widget.x" [(y)]="widget.y" [(w)]="widget.w" [(h)]="widget.h" *ngFor="let widget of dashboards[selectedDashboard].widgets">
              <!-- your content here -->

              <md-toolbar class="panel-heading" color="">
                {{widget.title}}
              </md-toolbar>

              <verso-notification class="panel-body" *ngIf="widget.type == 'notification'"></verso-notification>
              <verso-target class="panel-body" *ngIf="widget.type == 'target'"></verso-target>
              <verso-topic class="panel-body" *ngIf="widget.type == 'topic'"></verso-topic>
              <verso-note class="panel-body" *ngIf="widget.type == 'note'"></verso-note>
              <verso-task class="panel-body" *ngIf="widget.type == 'task'"></verso-task>
              <verso-kpi class="panel-body" *ngIf="widget.type == 'kpi'"></verso-kpi>

            </gridster-item>
          </gridster>


  </md-tab>
</md-tab-group>`

There is a strange offset between the mouse and gridster-item when I put gridster in md-tab.

[speculees]

I have had success with this approach. Try this…

In gridster-item.component :

`const dragStartSub = draggable.dragStart.subscribe((event: DraggableEvent) => { this.zone.run(() => { this.gridster.onStart(this.item); this.isDragging = true; cursorToElementPosition = event.getRelativeCoordinates(this.$element, event); }); });

const dragSub = draggable.dragMove.subscribe((event: DraggableEvent) => { this.$element.style.top = (event.clientY - cursorToElementPosition.y) + ‘px’; this.$element.style.left = (event.clientX - cursorToElementPosition.x) + ‘px’; this.gridster.onDrag(this.item); });`

And in DraggableEvent.ts replace :

'getRelativeCoordinates(container: HTMLElement, event: DraggableEvent): { x: number, y: number } { let style = window.getComputedStyle(container, null); return { x: event.clientX - parseInt(style.getPropertyValue(“left”), 10), y: event.clientY - parseInt(style.getPropertyValue(“top”), 10) }; }`

off course the event.getRelativeCoordinates(…) now has to be adjusted in prototype and so on…

[speculees]

Problem is fixed. Good job sir. 👍 However, sometimes the data that is passed to the parent component (tab) initially takes time to load so I guess the child component (gridster) doesn’t take that into account and takes the wrong size of the parent. But, perhaps that is not a problem of gridster so much as a tab problem. And it is easily fixed with something like <md-tabs ngIf=“dataExists” … > stuff. So, all okay on my end. 😉