save

src/app/portal-manage/dashboard-management/dashboard-management.component.html

@@ -138,21 +138,30 @@
     </div>
 
     <div class="dashboard-content">
-      <div *ngIf="!panels || panels.length === 0" class="flex flex-col justify-center items-center h-full text-center text-gray-500 bg-gray-50 rounded-lg">
+      <div
+        *ngIf="!panels || panels.length === 0"
+        class="flex flex-col justify-center items-center h-full text-center text-gray-500 bg-gray-50 rounded-lg"
+      >
         <i class="bi bi-kanban text-6xl text-gray-300"></i>
-        <h3 class="mt-4 text-xl font-semibold text-gray-700">Empty Dashboard</h3>
-        <p class="mt-2 max-w-md">To get started, select a dashboard from the dropdown above or create a new one. Then, click on a widget from the sidebar on the left to add it to this canvas.</p>
+        <h3 class="mt-4 text-xl font-semibold text-gray-700">
+          Empty Dashboard
+        </h3>
+        <p class="mt-2 max-w-md">
+          To get started, select a dashboard from the dropdown above or create a
+          new one. Then, click on a widget from the sidebar on the left to add
+          it to this canvas.
+        </p>
       </div>
 
       <ejs-dashboardlayout
         *ngIf="panels.length > 0"
         id="dashboard_default"
-        [columns]="6"
+        [columns]="columns"
         [cellSpacing]="cellSpacing"
         [panels]="panels"
         #editLayout
         [allowResizing]="true"
-        (change)="onPanelChange($event)"
+
       >
         <e-panels>
           <e-panel

src/app/portal-manage/dashboard-management/dashboard-management.component.scss

 /* Add any specific styles for the dashboard management component here */
 
+// #dashboard_default .e-panel {
+//   min-height: 100px !important; /* Adjust this value as needed */
+// }
+
+
 .dashboard-container {
   display: flex;
   height: 100vh;
@@ -53,7 +58,7 @@
 }
 
 .dashboard-content {
-  flex: 1;
+  // flex: 1;
   padding: 1rem; /* p-4 */
   overflow: auto;
   min-height: 600px; /* min-h-[600px] */

src/app/portal-manage/dashboard-management/dashboard-management.component.ts

-import { Component, OnInit, ViewChild, Type } from '@angular/core';
+import { Component, OnInit, ViewChild, Type, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, RouterModule } from '@angular/router';
 import { CommonModule, TitleCasePipe } from '@angular/common';
 import { NgComponentOutlet } from '@angular/common';
@@ -67,12 +67,13 @@ export interface DashboardPanel extends PanelModel {
   ],
   templateUrl: './dashboard-management.component.html',
   styleUrls: ['./dashboard-management.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class DashboardManagementComponent implements OnInit {
   @ViewChild('editLayout') public layout!: DashboardLayoutComponent;
   public panels: DashboardPanel[] = [];
   public cellSpacing: number[] = [10, 10];
-
+  public columns: number = 5;
   public availableWidgets: MenuItemsWidget[] = [];
   public filteredAvailableWidgets: MenuItemsWidget[] = [];
   public widgetSearchTerm: string = '';