Grid HeaderRowCSSClass and FiltersRowCSSClass still not working properly in 2.1

[BrianBCC]

*I hate to reopen this issue after your rapid attention before but it still does not work correctly. Since the update to 2.1 two new factors have occurred.

1. The class for the table in the grid no longer overrides the background colour of any parent container as it did before ie table table-stiped etc are overriden if the grid is enclosed in a grid with say a blue background.
2. More importantly the HeaderRowCSSClass only changes the color of the items it does not change the background. eg.

HeaderRowCssClass="topRow"

.topRow { background-color: yellow; color: https://github.com/dotnetcore/BootstrapBlazor/issues/2147; font-size: 16pt; } This results in header text in Oxford Blue 16pt type with a WHITE background. Setting the FiltersRowCssClass to the same style has no effect at all

[gvreddy04]

@BrianBCC I tried to apply the css class .top-row. It is working as expected. Please see the screenshot below.

<Grid TItem="Employee1"
      AllowSorting="true"
      Class="table table-hover"
      DataProvider="EmployeesDataProvider"
      HeaderRowCssClass="top-row border-bottom-0"
      Responsive="true">

    . . . 

</Grid>

<Grid TItem="Employee1"
      AllowFiltering="true"
      AllowSorting="true"
      Class="table table-hover"
      DataProvider="EmployeesDataProvider"
      FiltersRowCssClass="filter-row border-bottom-0"
      HeaderRowCssClass="top-row border-bottom-0"
      Responsive="true">

    . . . 

</Grid>

[gvreddy04]

@BrianBCC If you still get this issue, please share a sample GitHub repo with minimal steps to reproduce the issue, I'll check.

[BrianBCC]

Thank you for your amazingly fast response. Clearly I must be doing something wrong but I cannot think what. Attached is a screenshot of my code and the result. As you can see applying the class changes the colour of the text and the font size as expected but the background remains white. Also, the filters row is completely unaffected. Any suggestions? Brian

[A screenshot of a computer Description automatically generated]

[A screenshot of a computer program Description automatically generated]

[A screenshot of a computer Description automatically generated]

From: Vikram Gaddam @.> Sent: Monday, March 18, 2024 2:46 PM To: vikramlearning/blazorbootstrap @.> Cc: Brian Cohen @.>; Mention @.> Subject: Re: [vikramlearning/blazorbootstrap] Grid HeaderRowCSSClass and FiltersRowCSSClass still not working properly in 2.1 (Issue #621)

@BrianBCChttps://github.com/BrianBCC I tried to apply the css class .top-row. It is working as expected. Please see the screenshot below.

image.png (view on web)https://github.com/vikramlearning/blazorbootstrap/assets/2337067/d1d7454e-ea06-4358-b5f5-cc47f16045a2

— Reply to this email directly, view it on GitHubhttps://github.com/vikramlearning/blazorbootstrap/issues/621#issuecomment-2003957050, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ABTE5YSHUBIIUZMFZVC3W43YY3V3HAVCNFSM6AAAAABE3N3NCCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMBTHE2TOMBVGA. You are receiving this because you were mentioned.Message ID: @.**@.>>

[gvreddy04]

@BrianBCC Please attach screenshots, as I cannot see them here. Additionally, please share a sample GitHub repository to reproduce the issue.

[BrianBCC]

Screenshots attached. I will prepare a repo if it is not something obvious. Many thanks for your help Brian

From: Vikram Gaddam @.> Sent: Monday, March 18, 2024 3:32 PM To: vikramlearning/blazorbootstrap @.> Cc: Brian Cohen @.>; Mention @.> Subject: Re: [vikramlearning/blazorbootstrap] Grid HeaderRowCSSClass and FiltersRowCSSClass still not working properly in 2.1 (Issue #621)

@BrianBCChttps://github.com/BrianBCC Please attach screenshots, as I cannot see them here. Additionally, please share a sample GitHub repository to reproduce the issue.

— Reply to this email directly, view it on GitHubhttps://github.com/vikramlearning/blazorbootstrap/issues/621#issuecomment-2004078466, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ABTE5YRY242HX46JM3THCPTYY33HFAVCNFSM6AAAAABE3N3NCCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMBUGA3TQNBWGY. You are receiving this because you were mentioned.Message ID: @.**@.>>

[BrianBCC]

I have placed a public repo showing the problem at BrianBCC/bccGridTestApp (github.com)https://github.com/BrianBCC/bccGridTestApp in the header row the text colour and size responds to the class but not the background colour. In the filters row nothing relates to the class.

From: Vikram Gaddam @.> Sent: Monday, March 18, 2024 3:32 PM To: vikramlearning/blazorbootstrap @.> Cc: Brian Cohen @.>; Mention @.> Subject: Re: [vikramlearning/blazorbootstrap] Grid HeaderRowCSSClass and FiltersRowCSSClass still not working properly in 2.1 (Issue #621)

@BrianBCChttps://github.com/BrianBCC Please attach screenshots, as I cannot see them here. Additionally, please share a sample GitHub repository to reproduce the issue.

— Reply to this email directly, view it on GitHubhttps://github.com/vikramlearning/blazorbootstrap/issues/621#issuecomment-2004078466, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ABTE5YRY242HX46JM3THCPTYY33HFAVCNFSM6AAAAABE3N3NCCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMBUGA3TQNBWGY. You are receiving this because you were mentioned.Message ID: @.**@.>>

[gvreddy04]

@BrianBCC I've found the root cause of the issue. The background is being overridden when the FixedHeader parameter is set to true. As an interim solution, please override the background color variable when the Fixed header is enabled. See the code below for reference.

:root {
    --bb-table-sticky-background-color: yellow;
}

Screenshot:

[gvreddy04]

@BrianBCC Additional info for your reference.

[BrianBCC]

Thank you so much for this Vikram, I never thought to check the fixed header property. Your workaround works perfectly. Thank you again for dealing with it so promptly. Brian

From: Vikram Gaddam @.> Sent: Saturday, March 23, 2024 5:13 PM To: vikramlearning/blazorbootstrap @.> Cc: Brian Cohen @.>; Mention @.> Subject: Re: [vikramlearning/blazorbootstrap] Grid HeaderRowCSSClass and FiltersRowCSSClass still not working properly in 2.1 (Issue #621)

@BrianBCChttps://github.com/BrianBCC I've found the root cause of the issue. The background is being overridden when the FixedHeader property is set to true. As an interim solution, please override the background color variable when the Fixed header is enabled. See the code below for reference.

:root {

--bb-table-sticky-background-color: yellow;

}

Screenshot:

image.png (view on web)https://github.com/vikramlearning/blazorbootstrap/assets/2337067/21f5d612-db12-4630-8ca7-7ba9da908c9f

— Reply to this email directly, view it on GitHubhttps://github.com/vikramlearning/blazorbootstrap/issues/621#issuecomment-2016536232, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ABTE5YS4P3PFDKJ7F3ZSV5TYZWSZ7AVCNFSM6AAAAABE3N3NCCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMJWGUZTMMRTGI. You are receiving this because you were mentioned.Message ID: @.**@.>>

[gvreddy04]

436

[vasuamics]

Thank you so much. It worked without the FixedHeader="True". That's fine for now. I appreciate it.

[MaMon1963]

Hi Vikram, I was wondering if, with the release of version 3, there was any possibility of overcoming the problem of the fixed table header coloring that you somehow solved temporarily, with your suggestions but with the promise of a permanent solution. What can you tell us about it?