From f6873b7e52ce56fcc3d65e44f767f4a49024a7d5 Mon Sep 17 00:00:00 2001
From: Maya Kirova <MKirova@infragistics.com>
Date: Tue, 25 Nov 2025 12:20:06 +0200
Subject: [PATCH] Use flex styles to position text/icon in header instead of
 float so that they position correctly in moving UI.

---
 .../HierarchicalGridPinHeaderTemplate/Blazor.js             | 6 +++---
 .../HierarchicalGridPinHeaderTemplate/React.tsx             | 6 +++---
 .../HierarchicalGridPinHeaderTemplate/WebComponents.ts      | 6 +++---
 code-gen-library/WebGridPinHeaderTemplate/Blazor.js         | 6 +++---
 code-gen-library/WebGridPinHeaderTemplate/React.tsx         | 6 +++---
 code-gen-library/WebGridPinHeaderTemplate/WebComponents.ts  | 6 +++---
 code-gen-library/WebTreeGridPinHeaderTemplate/Blazor.js     | 6 +++---
 code-gen-library/WebTreeGridPinHeaderTemplate/React.tsx     | 6 +++---
 .../WebTreeGridPinHeaderTemplate/WebComponents.ts           | 6 +++---
 9 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/code-gen-library/HierarchicalGridPinHeaderTemplate/Blazor.js b/code-gen-library/HierarchicalGridPinHeaderTemplate/Blazor.js
index 0eb4c1ff7..bb02ce7d9 100644
--- a/code-gen-library/HierarchicalGridPinHeaderTemplate/Blazor.js
+++ b/code-gen-library/HierarchicalGridPinHeaderTemplate/Blazor.js
@@ -4,9 +4,9 @@ igRegisterScript("HierarchicalGridPinHeaderTemplate", (ctx) => {
     window.toggleColumnPin = function toggleColumnPin(column) {
             column.pinned = !column.pinned;
     }
-    return html`<div>
-    <span style="float:left">${ctx.column.field}</span>
-    <span style="float:right" @pointerdown=${() => toggleColumnPin(ctx.column)}>📌</span>
+    return html`<div style="display:flex;">
+    <span>${ctx.column.field}</span>
+    <span style="margin-left: auto;" @pointerdown=${() => toggleColumnPin(ctx.column)}>📌</span>
 </div>`;
 }, false);
 //end template
\ No newline at end of file
diff --git a/code-gen-library/HierarchicalGridPinHeaderTemplate/React.tsx b/code-gen-library/HierarchicalGridPinHeaderTemplate/React.tsx
index 9294fb137..d61c4fa11 100644
--- a/code-gen-library/HierarchicalGridPinHeaderTemplate/React.tsx
+++ b/code-gen-library/HierarchicalGridPinHeaderTemplate/React.tsx
@@ -9,9 +9,9 @@ export class HierarchicalGridPinHeaderTemplate {
     public hierarchicalGridPinHeaderTemplate = (props: {dataContext: IgrColumnTemplateContext}) => {
         const column = (props.dataContext as any).column;
         return (
-            <div>
-                <span style={{float: 'left'}}>{column.field}</span>
-                <span style={{float: 'right'}} onPointerDown={(e: any) => this.toggleColumnPin(column)}>📌</span>
+            <div style={{display: 'flex'}}>
+                <span>{column.field}</span>
+                <span style={{marginLeft: 'auto'}} onPointerDown={(e: any) => this.toggleColumnPin(column)}>📌</span>
             </div>
         );
     }
diff --git a/code-gen-library/HierarchicalGridPinHeaderTemplate/WebComponents.ts b/code-gen-library/HierarchicalGridPinHeaderTemplate/WebComponents.ts
index 7753b7cdc..db106bd6f 100644
--- a/code-gen-library/HierarchicalGridPinHeaderTemplate/WebComponents.ts
+++ b/code-gen-library/HierarchicalGridPinHeaderTemplate/WebComponents.ts
@@ -11,9 +11,9 @@ export class HierarchicalGridPinHeaderTemplate {
 public hierarchicalGridPinHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
 
     const column = (ctx as any).column;
-    return html`<div>
-                 <span style="float:left">${column.field}</span>
-                 <span style="float:right" @pointerdown=${(e: any) => this.toggleColumnPin(column)}>📌</span>
+    return html`<div style="display:flex;">
+                 <span>${column.field}</span>
+                 <span style="margin-left: auto;" @pointerdown=${(e: any) => this.toggleColumnPin(column)}>📌</span>
                </div>`;
 };
 //end content
diff --git a/code-gen-library/WebGridPinHeaderTemplate/Blazor.js b/code-gen-library/WebGridPinHeaderTemplate/Blazor.js
index e48aa5b97..e363922ce 100644
--- a/code-gen-library/WebGridPinHeaderTemplate/Blazor.js
+++ b/code-gen-library/WebGridPinHeaderTemplate/Blazor.js
@@ -7,9 +7,9 @@ igRegisterScript("WebGridPinHeaderTemplate", (ctx) => {
         col.pinned = !col.pinned;
         grid.markForCheck();
     }
-    return html`<div>
-    <span style="float:left">${ctx.column.field}</span>
-    <span style="float:right" onpointerdown='toggleColumnPin("${ctx.column.field}")'>📌</span>
+    return html`<div style="display:flex;">
+    <span>${ctx.column.field}</span>
+    <span style="margin-left: auto;" onpointerdown='toggleColumnPin("${ctx.column.field}")'>📌</span>
 </div>`;
 }, false);
 //end template
\ No newline at end of file
diff --git a/code-gen-library/WebGridPinHeaderTemplate/React.tsx b/code-gen-library/WebGridPinHeaderTemplate/React.tsx
index 47b4c8556..a701c19e0 100644
--- a/code-gen-library/WebGridPinHeaderTemplate/React.tsx
+++ b/code-gen-library/WebGridPinHeaderTemplate/React.tsx
@@ -8,9 +8,9 @@ export class WebGridPinHeaderTemplateComponent {
 public webGridPinHeaderTemplate = (props: {dataContext: IgrColumnTemplateContext}) => {
     const column = (props.dataContext as any).column;
     return (
-        <div>
-            <span style={{float: 'left'}}>{column.field}</span>
-            <span style={{float: 'right'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
+        <div style={{display: 'flex'}}>
+            <span>{column.field}</span>
+            <span style={{marginLeft: 'auto'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
         </div>
     );
 }
diff --git a/code-gen-library/WebGridPinHeaderTemplate/WebComponents.ts b/code-gen-library/WebGridPinHeaderTemplate/WebComponents.ts
index 499f0c4bc..17286d335 100644
--- a/code-gen-library/WebGridPinHeaderTemplate/WebComponents.ts
+++ b/code-gen-library/WebGridPinHeaderTemplate/WebComponents.ts
@@ -11,9 +11,9 @@ export class WebGridPinHeaderTemplateComponent {
 public webGridPinHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
 
     const column = (ctx as any).column;
-    return html`<div>
-                 <span style="float:left">${column.field}</span>
-                 <span style="float:right" @pointerdown=${(e: any) => this.toggleColumnPin(column.field)}>📌</span>
+    return html`<div style="display:flex;">
+                 <span>${column.field}</span>
+                 <span style="margin-left: auto;" @pointerdown=${(e: any) => this.toggleColumnPin(column.field)}>📌</span>
                </div>`;
     };
 //end content
diff --git a/code-gen-library/WebTreeGridPinHeaderTemplate/Blazor.js b/code-gen-library/WebTreeGridPinHeaderTemplate/Blazor.js
index 69fbf504c..58d806389 100644
--- a/code-gen-library/WebTreeGridPinHeaderTemplate/Blazor.js
+++ b/code-gen-library/WebTreeGridPinHeaderTemplate/Blazor.js
@@ -7,9 +7,9 @@ igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => {
         col.pinned = !col.pinned;
         grid.markForCheck();
     }
-    return html`<div>
-    <span style="float:left">${ctx.column.field}</span>
-    <span style="float:right" onpointerdown='toggleColumnPin("${ctx.column.field}")'>📌</span>
+    return html`<div style="display:flex;">
+    <span>${ctx.column.field}</span>
+    <span style="margin-left: auto;" onpointerdown='toggleColumnPin("${ctx.column.field}")'>📌</span>
 </div>`;
 }, false);
 //end template
\ No newline at end of file
diff --git a/code-gen-library/WebTreeGridPinHeaderTemplate/React.tsx b/code-gen-library/WebTreeGridPinHeaderTemplate/React.tsx
index 9195a2b86..cc3338de6 100644
--- a/code-gen-library/WebTreeGridPinHeaderTemplate/React.tsx
+++ b/code-gen-library/WebTreeGridPinHeaderTemplate/React.tsx
@@ -8,9 +8,9 @@ export class WebTreeGridPinHeaderTemplate {
 public webTreeGridPinHeaderTemplate = (props: {dataContext: IgrColumnTemplateContext}) => {
     const column = (props.dataContext as any).column;
     return (
-        <div>
-            <span style={{float: 'left'}}>{column.field}</span>
-            <span style={{float: 'right'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
+        <div style={{display: 'flex'}}>
+            <span>{column.field}</span>
+            <span style={{marginLeft: 'auto'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
         </div>
     );
 }
diff --git a/code-gen-library/WebTreeGridPinHeaderTemplate/WebComponents.ts b/code-gen-library/WebTreeGridPinHeaderTemplate/WebComponents.ts
index 574758359..2237c0aff 100644
--- a/code-gen-library/WebTreeGridPinHeaderTemplate/WebComponents.ts
+++ b/code-gen-library/WebTreeGridPinHeaderTemplate/WebComponents.ts
@@ -11,9 +11,9 @@ export class WebTreeGridPinHeaderTemplate {
 public webTreeGridPinHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
 
     const column = (ctx as any).column;
-    return html`<div>
-                 <span style="float:left">${column.field}</span>
-                 <span style="float:right" @pointerdown=${(e: any) => this.toggleColumnPin(column.field)}>📌</span>
+    return html`<div style="display:flex;">
+                 <span>${column.field}</span>
+                 <span style="margin-left: auto;" @pointerdown=${(e: any) => this.toggleColumnPin(column.field)}>📌</span>
                </div>`;
     };
 //end content