Topic: Table rendering problem in Safari

hamza.talha free asked 1 year ago


Normally table should render normally when data is loaded.

Only in Safari browser, table does not renders normally. No data is shown in table cells until the user zooms-in or zooms-out the screen. The problem is encountered in various versions of iphone while using various versions of Safari. The table loads normally in all other browzers.

HTML

No items for the selected date Reading Time Meter Reading Water Drawn {{head}} {{i + 1}} {{el.Site_Name}} {{el.Reading_From | date:'short'}} {{el.Reading_To | date:'short'}} {{el.Yesterday_Reading | number}} {{el.Today_Reading | number}} {{el.Total_Delivery_m3 | number}} {{ el.Total_Delivery_GPD | number}} --> Total {{ getGrandTotal('Total_Delivery_m3') | number }} {{ getGrandTotal('Total_Delivery_GPD') | number }}

TS

import { Component, Input, OnInit } from '@angular/core'; import { Output, EventEmitter } from '@angular/core';

@Component({ selector: 'app-daily-delivery-table', templateUrl: './daily-delivery-table.component.html', styleUrls: ['./daily-delivery-table.component.scss'] }) export class DailyDeliveryTableComponent implements OnInit {

@Input() dataTable: any[] = []; @Input() tableLoading: boolean = false; @Output() newDateEvent = new EventEmitter();

headElements = ['#', 'Site Name', 'From', 'To', 'Yesterday', 'Today', 'm3', 'GPD'];

constructor() { }

ngOnInit(): void {

}

getGrandTotal(key: string): number {

let total: number = 0;

for (let item of this.dataTable) {

  total = total + item[key];
}

return total;

}

dateEvent(newDate: Date): void {

this.newDateEvent.emit(newDate);

}

}


Arkadiusz Idzikowski staff commented 1 year ago

@hamza.talha Please edit your post and provide an example HTML/TS code on which we will be able to reproduce this problem.

On which device/safari version did you test our component?


Arkadiusz Idzikowski staff commented 1 year ago

@hamza.talha Thank you for the additional information. Could you please fix the code formatting? Currently, it is unreadable, code in the HTML section does not look like a valid HTML.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB4 11.1.0
  • Device: iPhone (various models)
  • Browser: Safari (various versions)
  • OS: iOS
  • Provided sample code: No
  • Provided link: No