Use flex styles to position text/icon in header instead of float so that they position correctly in moving UI. (#939)

Author: MayaKirova

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" @click=${() => toggleColumnPin(ctx.column)}>📌</span>
+    return html`<div style="display:flex;">
+    <span>${ctx.column.field}</span>
+    <span style="margin-left: auto;" @click=${() => toggleColumnPin(ctx.column)}>📌</span>
 </div>`;
 }, false);
 //end template

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'}} onClick={(e: any) => this.toggleColumnPin(column)}>📌</span>
+            <div style={{display: 'flex'}}>
+                <span>{column.field}</span>
+                <span style={{marginLeft: 'auto'}} onClick={(e: any) => this.toggleColumnPin(column)}>📌</span>
             </div>
         );
     }

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" @click=${(e: any) => this.toggleColumnPin(column)}>📌</span>
+    return html`<div style="display:flex;">
+                 <span>${column.field}</span>
+                 <span style="margin-left: auto;" @click=${(e: any) => this.toggleColumnPin(column)}>📌</span>
                </div>`;
 };
 //end content

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

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>
     );
 }

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

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

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>
     );
 }

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