เเก้ตำเเหน่งความกว้าง

src/app/components/report-component/report-com/report-com-1/report-com-1.component.html

@@ -3,27 +3,31 @@
   activeitem="รายงาน">
 </app-page-header>
 
-<div id="Grid_toolbarItems" class="e-control e-toolbar e-lib e-keyboard" role="toolbar" aria-disabled="false" aria-orientation="horizontal" style="height: auto; width: auto;" tabindex="-1">
-  <div class="e-toolbar-items" style="display: flex; justify-content: flex-end;">
-    <div class="e-toolbar-item" title="Print">
-      <button class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib" type="button" id="Grid_print" tabindex="0" data-tabindex="-1" aria-label="Print" aria-disabled="false" style="width: auto;">
-        <span class="e-btn-icon e-print e-icons e-icon-left"></span>
-        <span class="e-tbar-btn-text">Print</span>
-      </button>
-    </div>
-    <div class="e-toolbar-item" title="Excel Export">
-      <button class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib" type="button" id="Grid_excelexport" tabindex="0" data-tabindex="-1" aria-label="Excel Export" aria-disabled="false" style="width: auto;">
-        <span class="e-btn-icon ri-file-excel-2-fill e-icons e-icon-left"></span>
-        <span class="e-tbar-btn-text">Excel Export</span>
-      </button>
-    </div>
-    <div class="e-toolbar-item" title="PDF Export">
-      <button class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib" type="button" id="Grid_csvexport" tabindex="0" data-tabindex="-1" aria-label="CSV Export" aria-disabled="false" style="width: auto;">
-        <span class="e-btn-icon ri-file-pdf-fill e-icons e-icon-left"></span>
-        <span class="e-tbar-btn-text">PDF Export</span>
-      </button>
+<div class="flex justify-end">
+  <div class="px-1">
+    <div id="Grid_toolbarItems" class="e-control e-toolbar e-lib e-keyboard" role="toolbar" aria-disabled="false" aria-orientation="horizontal" style="height: auto; width: 300px; border-radius: 0.50rem;" tabindex="-1">
+    <div class="e-toolbar-items" style="display: flex; justify-content: flex-end;">
+      <div class="e-toolbar-item" title="Print">
+        <button class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib" type="button" id="Grid_print" tabindex="0" data-tabindex="-1" aria-label="Print" aria-disabled="false" style="width: auto;">
+          <span class="e-btn-icon e-print e-icons e-icon-left"></span>
+          <span class="e-tbar-btn-text">Print</span>
+        </button>
+      </div>
+      <div class="e-toolbar-item" title="Excel Export">
+        <button class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib" type="button" id="Grid_excelexport" tabindex="0" data-tabindex="-1" aria-label="Excel Export" aria-disabled="false" style="width: auto;">
+          <span class="e-btn-icon ri-file-excel-2-fill e-icons e-icon-left"></span>
+          <span class="e-tbar-btn-text">Excel Export</span>
+        </button>
+      </div>
+      <div class="e-toolbar-item" title="PDF Export">
+        <button class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib" type="button" id="Grid_csvexport" tabindex="0" data-tabindex="-1" aria-label="CSV Export" aria-disabled="false" style="width: auto;">
+          <span class="e-btn-icon ri-file-pdf-fill e-icons e-icon-left"></span>
+          <span class="e-tbar-btn-text">PDF Export</span>
+        </button>
+      </div>
     </div>
   </div>
+  </div>
 </div>
 
 

src/app/components/report-component/report-com/report-com-2/report-com-2.component.html

@@ -2,28 +2,34 @@
   [title]="'รายงานภาพรวม Competency ของหน่วยงาน'"
   activeitem="รายงาน">
 </app-page-header>
-<div id="Grid_toolbarItems" class="e-control e-toolbar e-lib e-keyboard" role="toolbar" aria-disabled="false" aria-orientation="horizontal" style="height: auto; width: auto;" tabindex="-1">
-  <div class="e-toolbar-items" style="display: flex; justify-content: flex-end;">
-    <div class="e-toolbar-item" title="Print">
-      <button class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib" type="button" id="Grid_print" tabindex="0" data-tabindex="-1" aria-label="Print" aria-disabled="false" style="width: auto;">
-        <span class="e-btn-icon e-print e-icons e-icon-left"></span>
-        <span class="e-tbar-btn-text">Print</span>
-      </button>
-    </div>
-    <div class="e-toolbar-item" title="Excel Export">
-      <button class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib" type="button" id="Grid_excelexport" tabindex="0" data-tabindex="-1" aria-label="Excel Export" aria-disabled="false" style="width: auto;">
-        <span class="e-btn-icon ri-file-excel-2-fill e-icons e-icon-left"></span>
-        <span class="e-tbar-btn-text">Excel Export</span>
-      </button>
-    </div>
-    <div class="e-toolbar-item" title="PDF Export">
-      <button class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib" type="button" id="Grid_csvexport" tabindex="0" data-tabindex="-1" aria-label="CSV Export" aria-disabled="false" style="width: auto;">
-        <span class="e-btn-icon ri-file-pdf-fill e-icons e-icon-left"></span>
-        <span class="e-tbar-btn-text">PDF Export</span>
-      </button>
+
+<div class="flex justify-end">
+  <div class="px-1">
+    <div id="Grid_toolbarItems" class="e-control e-toolbar e-lib e-keyboard" role="toolbar" aria-disabled="false" aria-orientation="horizontal" style="height: auto; width: 300px; border-radius: 0.50rem;" tabindex="-1">
+    <div class="e-toolbar-items" style="display: flex; justify-content: flex-end;">
+      <div class="e-toolbar-item" title="Print">
+        <button class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib" type="button" id="Grid_print" tabindex="0" data-tabindex="-1" aria-label="Print" aria-disabled="false" style="width: auto;">
+          <span class="e-btn-icon e-print e-icons e-icon-left"></span>
+          <span class="e-tbar-btn-text">Print</span>
+        </button>
+      </div>
+      <div class="e-toolbar-item" title="Excel Export">
+        <button class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib" type="button" id="Grid_excelexport" tabindex="0" data-tabindex="-1" aria-label="Excel Export" aria-disabled="false" style="width: auto;">
+          <span class="e-btn-icon ri-file-excel-2-fill e-icons e-icon-left"></span>
+          <span class="e-tbar-btn-text">Excel Export</span>
+        </button>
+      </div>
+      <div class="e-toolbar-item" title="PDF Export">
+        <button class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib" type="button" id="Grid_csvexport" tabindex="0" data-tabindex="-1" aria-label="CSV Export" aria-disabled="false" style="width: auto;">
+          <span class="e-btn-icon ri-file-pdf-fill e-icons e-icon-left"></span>
+          <span class="e-tbar-btn-text">PDF Export</span>
+        </button>
+      </div>
     </div>
   </div>
+  </div>
 </div>
+
 <section class="report-wrap">
 
   <!-- ── Head ── -->

src/app/components/report-component/report-com/report-com-3/report-com-3.component.html

@@ -2,28 +2,34 @@
   [title]="'รายงานสรุปจำนวนพนักงานที่ติด GAP Competency'"
   activeitem="รายงาน">
 </app-page-header>
-<div id="Grid_toolbarItems" class="e-control e-toolbar e-lib e-keyboard" role="toolbar" aria-disabled="false" aria-orientation="horizontal" style="height: auto; width: auto;" tabindex="-1">
-  <div class="e-toolbar-items" style="display: flex; justify-content: flex-end;">
-    <div class="e-toolbar-item" title="Print">
-      <button class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib" type="button" id="Grid_print" tabindex="0" data-tabindex="-1" aria-label="Print" aria-disabled="false" style="width: auto;">
-        <span class="e-btn-icon e-print e-icons e-icon-left"></span>
-        <span class="e-tbar-btn-text">Print</span>
-      </button>
-    </div>
-    <div class="e-toolbar-item" title="Excel Export">
-      <button class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib" type="button" id="Grid_excelexport" tabindex="0" data-tabindex="-1" aria-label="Excel Export" aria-disabled="false" style="width: auto;">
-        <span class="e-btn-icon ri-file-excel-2-fill e-icons e-icon-left"></span>
-        <span class="e-tbar-btn-text">Excel Export</span>
-      </button>
-    </div>
-    <div class="e-toolbar-item" title="PDF Export">
-      <button class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib" type="button" id="Grid_csvexport" tabindex="0" data-tabindex="-1" aria-label="CSV Export" aria-disabled="false" style="width: auto;">
-        <span class="e-btn-icon ri-file-pdf-fill e-icons e-icon-left"></span>
-        <span class="e-tbar-btn-text">PDF Export</span>
-      </button>
+
+<div class="flex justify-end">
+  <div class="px-1">
+    <div id="Grid_toolbarItems" class="e-control e-toolbar e-lib e-keyboard" role="toolbar" aria-disabled="false" aria-orientation="horizontal" style="height: auto; width: 300px; border-radius: 0.50rem;" tabindex="-1">
+    <div class="e-toolbar-items" style="display: flex; justify-content: flex-end;">
+      <div class="e-toolbar-item" title="Print">
+        <button class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib" type="button" id="Grid_print" tabindex="0" data-tabindex="-1" aria-label="Print" aria-disabled="false" style="width: auto;">
+          <span class="e-btn-icon e-print e-icons e-icon-left"></span>
+          <span class="e-tbar-btn-text">Print</span>
+        </button>
+      </div>
+      <div class="e-toolbar-item" title="Excel Export">
+        <button class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib" type="button" id="Grid_excelexport" tabindex="0" data-tabindex="-1" aria-label="Excel Export" aria-disabled="false" style="width: auto;">
+          <span class="e-btn-icon ri-file-excel-2-fill e-icons e-icon-left"></span>
+          <span class="e-tbar-btn-text">Excel Export</span>
+        </button>
+      </div>
+      <div class="e-toolbar-item" title="PDF Export">
+        <button class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib" type="button" id="Grid_csvexport" tabindex="0" data-tabindex="-1" aria-label="CSV Export" aria-disabled="false" style="width: auto;">
+          <span class="e-btn-icon ri-file-pdf-fill e-icons e-icon-left"></span>
+          <span class="e-tbar-btn-text">PDF Export</span>
+        </button>
+      </div>
     </div>
   </div>
+  </div>
 </div>
+
 <section class="gap-wrap">
 
   <header class="txt-center mb-8">