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; 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 @@ - - + +