Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Bug]: ShowHeaderGroupCaptions messes with DataGrid Layout #5804

Open
Alexander-JM-0224 opened this issue Oct 25, 2024 · 4 comments · May be fixed by #5815
Open

[Bug]: ShowHeaderGroupCaptions messes with DataGrid Layout #5804

Alexander-JM-0224 opened this issue Oct 25, 2024 · 4 comments · May be fixed by #5815
Assignees
@tesar-tech
Labels
Type: Bug 🐞 Something isn't working
Milestone
2.0

Comments

@Alexander-JM-0224
Copy link

Blazorise Version

1.6.2

What Blazorise provider are you running on?

Bootstrap5

Link to minimal reproduction or a simple code snippet

https://github.com/Alexander-JM-0224/BlazoriseDataGridTestApp.git

Steps to reproduce

Open the app, switch between the 2 pages in the navbar and see the difference.

What is expected?

My expectation would be that when i have a nice working DataGrid where the styling is okay and the columns are the correct width. Adding the ShowHeaderGroupCaptions should not mess with the layout of the DataGrid

What is actually happening?

Well, when i add the ShowHeaderGroupCaptions is smushes soms columns. Does not respect the Width attributes we added to the columns.

First the DataGrid without ShowHeaderGroupCaptions.
Image

Then the DataGrid with ShowHeaderGroupCaptions.
Image

Now how it should be.
Image

What i need to do to make the DataGrid correct is in the inspector i need to turn 2 Width properties off, then it is showing correct spacing.
Image

What browsers do you see the problem on?

Chrome, Firefox

Any additional comments?

This is a small difference, but it is not something we want to have happen, and i sincerely doubt this should be the expected behaviour of the functionality.

Please, if i am missing something, or there is a simple workaround please let me know.
@Alexander-JM-0224 Alexander-JM-0224 added the Type: Bug 🐞 Something isn't working label Oct 25, 2024
@stsrki
Copy link
Collaborator

stsrki commented Oct 28, 2024

Please, if i am missing something, or there is a simple workaround please let me know.

Since this is coming from Bootstrap by default, I believe it is best to add some custom CSS rules on your project side as a workaround until we make a fix for this.

.table-fixed-header table.b-table
{
  width: unset:
}

@stsrki stsrki added this to Support Oct 28, 2024
@github-project-automation github-project-automation bot moved this to 🔙 Backlog in Support Oct 28, 2024
@stsrki stsrki added this to the 1.7 milestone Oct 28, 2024
@Alexander-JM-0224
Copy link
Author

Thankyou, this will be fine for the time being. The workaround is working for me!

tesar-tech added a commit that referenced this issue Oct 31, 2024
@tesar-tech
fix datagrid header column width. closes #5804
8d09099
@tesar-tech tesar-tech linked a pull request Oct 31, 2024 that will close this issue
Open
@stsrki stsrki modified the milestones: 1.7, 2.0 Nov 14, 2024
@stsrki
Copy link
Collaborator

stsrki commented Nov 15, 2024

Hello @Alexander-JM-0224

Due to time and some technical difficulties, we have postponed the fix for this issue for another release. Hopefully, we will find a better solution by then.

@Alexander-JM-0224
Copy link
Author

Hello @Alexander-JM-0224

Due to time and some technical difficulties, we have postponed the fix for this issue for another release. Hopefully, we will find a better solution by then.

Hello @stsrki, i was following the PR and was thinking.. Yeah this might not be a quick fix ;)
But the workaround works for us for now, and does not interfere with our other styling rules we have in place.

Thanks for the actions at least!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@tesar-tech tesar-tech

Labels
Type: Bug 🐞 Something isn't working
Projects
Support
Status: 🔙 Backlog
Milestone
2.0
Development

Successfully merging a pull request may close this issue.

DataGrid: Group header column width fix Megabit/Blazorise
3 participants
@stsrki @tesar-tech @Alexander-JM-0224