From 7508ab0423b9661d2d7e4775fcb1bc582016b242 Mon Sep 17 00:00:00 2001 From: Daria Tiurina Date: Fri, 11 Jul 2025 17:21:48 +0200 Subject: [PATCH 1/3] Implementation of the missing align properties --- .../src/QuickGrid.razor.css | 31 ++++++++++++++++--- 1 file changed, 26 insertions(+), 5 deletions(-) diff --git a/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor.css b/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor.css index e08d86d1991c..0c65f335ef0c 100644 --- a/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor.css +++ b/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor.css @@ -51,11 +51,6 @@ th ::deep .col-options-button { z-index: 1; } -.col-justify-end .col-options { - left: unset; - right: 0; -} - .col-width-draghandle { position: absolute; top: 0; @@ -76,10 +71,32 @@ td.col-justify-center { text-align: center; } +.col-justify-end .col-options { + left: unset; + right: 0; +} + td.col-justify-end { text-align: right; } +.col-justify-start .col-options { + left: 0; + right: unset; +} + +td.col-justify-start { + text-align: left; +} + +td.col-justify-right { + text-align: right; +} + +td.col-justify-left { + text-align: left; +} + /* Unfortunately we can't use the :dir pseudoselector due to lack of browser support. Instead we have to rely on the developer setting to detect if we're in RTL mode. */ html[dir=rtl] td.col-justify-end { @@ -91,6 +108,10 @@ html[dir=rtl] .col-options { right: 0; } +html[dir=rtl] td.col-justify-start { + text-align: right; +} + html[dir=rtl] .col-justify-end .col-options { right: unset; left: 0; From 39c326322f8086ba9903f06cd24ce8fe7fa4e679 Mon Sep 17 00:00:00 2001 From: Daria Tiurina Date: Wed, 16 Jul 2025 16:14:23 +0200 Subject: [PATCH 2/3] Fix css properties + feedback --- .../src/QuickGrid.razor.css | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor.css b/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor.css index e08d86d1991c..4747ec263339 100644 --- a/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor.css +++ b/src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/QuickGrid.razor.css @@ -80,6 +80,23 @@ td.col-justify-end { text-align: right; } +.col-justify-start .col-options { + left: 0; + right: unset; +} + +td.col-justify-start { + text-align: left; +} + +td.col-justify-right { + text-align: right; +} + +td.col-justify-left { + text-align: left; +} + /* Unfortunately we can't use the :dir pseudoselector due to lack of browser support. Instead we have to rely on the developer setting to detect if we're in RTL mode. */ html[dir=rtl] td.col-justify-end { @@ -91,6 +108,10 @@ html[dir=rtl] .col-options { right: 0; } +html[dir=rtl] td.col-justify-start { + text-align: right; +} + html[dir=rtl] .col-justify-end .col-options { right: unset; left: 0; From dc4616913cbb6ca4d66c200c74a0adffcf59a2d0 Mon Sep 17 00:00:00 2001 From: Daria Tiurina Date: Wed, 16 Jul 2025 16:40:10 +0200 Subject: [PATCH 3/3] Added test for css properties --- .../test/E2ETest/Tests/QuickGridTest.cs | 18 ++++++++++++++++++ .../SampleQuickGridComponent.razor | 4 ++-- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/src/Components/test/E2ETest/Tests/QuickGridTest.cs b/src/Components/test/E2ETest/Tests/QuickGridTest.cs index 9e470e838007..63ea37319277 100644 --- a/src/Components/test/E2ETest/Tests/QuickGridTest.cs +++ b/src/Components/test/E2ETest/Tests/QuickGridTest.cs @@ -8,6 +8,7 @@ using Microsoft.AspNetCore.Components.E2ETest.Infrastructure.ServerFixtures; using Microsoft.AspNetCore.E2ETesting; using OpenQA.Selenium; +using OpenQA.Selenium.Support.Extensions; using Xunit.Abstractions; namespace Microsoft.AspNetCore.Components.E2ETests.Tests; @@ -149,6 +150,23 @@ public void RowClassApplied() } } + [Fact] + public void RowStyleApplied() + { + var grid = app.FindElement(By.CssSelector("#grid > table")); + var birthDateColumn = grid.FindElement(By.CssSelector("thead > tr > th:nth-child(4)")); + var ageColumn = grid.FindElement(By.CssSelector("thead > tr > th:nth-child(5)")); + + Assert.Contains("col-justify-center", birthDateColumn.GetAttribute("class")); + Assert.Contains("col-justify-right", ageColumn.GetAttribute("class")); + Assert.Equal("center", Browser.ExecuteJavaScript(@" + const p = document.querySelector('tbody > tr:first-child > td:nth-child(4)'); + return p ? getComputedStyle(p).textAlign : null;")); + Assert.Equal("right", Browser.ExecuteJavaScript(@" + const p = document.querySelector('tbody > tr:first-child > td:nth-child(5)'); + return p ? getComputedStyle(p).textAlign : null;")); + } + [Fact] public void CanOpenColumnOptions() { diff --git a/src/Components/test/testassets/BasicTestApp/QuickGridTest/SampleQuickGridComponent.razor b/src/Components/test/testassets/BasicTestApp/QuickGridTest/SampleQuickGridComponent.razor index 33118db61f51..8de3631566f6 100644 --- a/src/Components/test/testassets/BasicTestApp/QuickGridTest/SampleQuickGridComponent.razor +++ b/src/Components/test/testassets/BasicTestApp/QuickGridTest/SampleQuickGridComponent.razor @@ -14,8 +14,8 @@ - - + +