infor-cloud / widget-sdk

Infor Widget SDK
https://infor-cloud.github.io/widget-sdk/
Other
60 stars 14 forks source link

Not enough bottom-margin for widget footer with datagrid pager in double-height widget #28

Closed albinpettersson closed 8 months ago

albinpettersson commented 1 year ago

I'm not sure if this is better reported as an issue for the widget sdk or for homepages. This issue exists at least in versions 3.14.1 and 3.22.0. The same issue is present when running the widgets locally, on a homepage in Infor OS as well as on a workspace in the new Infor OS portal. The issue is also present in at least Chrome and Edge.

At any rate, when creating a simple widget with a data grid with paging enabled, the pager gets placed in the widget footer by default if the widget's Y-size is at least two. The margins between the rows is too small to accomodate the pager, resulting in the pager being partially placed behind the next row of widgets.

In order to reproduce the issue, create a widget with a datagrid:

<div soho-datagrid class="datagrid" [gridOptions]="gridOptions"></div>

And make sure that paging is enabled for the grid:

gridOptions: SohoDataGridOptions = {
    paging: true,
    pagesize: 100,
    pagesizes: [5, 10, 25, 50, 100, 500, 1000],
} as SohoDataGridOptions;

Next, set the size of the widget to at least 2 rows high, and place some widget(s) on the row below it.

Here's a fairly minimal example that can be easily plugged into the infor.sample.dangular.cardlist sample provided in the SDK:

import { CommonModule } from "@angular/common";
import {
    ChangeDetectionStrategy,
    ChangeDetectorRef,
    Component,
    Input,
    NgModule,
    OnInit,
} from "@angular/core";
import { SohoDataGridModule } from "@infor/sohoxi-angular";
import {
    IWidgetComponent,
    IWidgetContext,
    IWidgetInstance,
} from "lime";

@Component({
    template: `
        <div soho-datagrid class="datagrid" [gridOptions]="gridOptions"></div>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CardListComponent implements OnInit, IWidgetComponent {
    @Input() widgetContext: IWidgetContext;
    @Input() widgetInstance: IWidgetInstance;

    gridOptions: SohoDataGridOptions = {
        paging: true,
        pagesize: 100,
        pagesizes: [5, 10, 25, 50, 100, 500, 1000],
    } as SohoDataGridOptions;

    constructor(private readonly changeDetectionRef: ChangeDetectorRef) {}

    ngOnInit() {}
}

@NgModule({
    imports: [CommonModule, SohoDataGridModule],
    declarations: [CardListComponent],
})
export class CardListModule {}
image
nipunbhanot commented 8 months ago

Hi @albinpettersson I am facing a similar issue recently that after refreshing my widget webpage, the widget footer which contains pagination just disappears. Was this issue ever solved? (It seems to be still "open") I am wondering if the fix for me would also be the same.

gustavpollak commented 8 months ago

Late reply but the issue has been reported to IDS and has been confirmed to be a bug that they will work on.