[Bug]: max-width on DataGridColumn does not work

[e-ademi]

Blazorise Version

1.4.2

What Blazorise provider are you running on?

Bootstrap5

Link to minimal reproduction, or a simple code snippet

<DataGridColumn HeaderCellStyle="max-width: 200px !important; " CellStyle="@((i)=>"max-width: 200px !important; white-space: nowrap")" Caption="Name">

Steps to reproduce

Just set a text which is longer than the width of 200px

What is expected?

The column width should stay at max 200px

What is actually happening?

The column width exceed the max-width

What browsers are you seeing the problem on?

No response

Any additional comments?

No response

[David-Moreira]

Hello @albason
I just tried to set your styling in on of our examples and run Bootstrap5 application and it seems like it is working. The cell does not grow past the 200px

                <DataGrid TItem="Employee"
                          Data="inMemoryData"
                          Responsive
                          ShowPager
                          ShowPageSizes>
                    <DataGridColumns>
                        <DataGridColumn TextAlignment="TextAlignment.Center" TItem="Employee" Field="@nameof( Employee.Id )" Caption="#" Width="60px" />
                        <DataGridColumn TItem="Employee" Field="@nameof( Employee.FirstName )" Caption="First Name">
                        </DataGridColumn>
                        <DataGridColumn TItem="Employee" Field="@nameof( Employee.LastName )" Caption="Last Name" />
                        <DataGridColumn TItem="Employee" Field="@nameof( Employee.Email )" Caption="Email" HeaderCellStyle="max-width: 200px !important; " CellStyle="@((i)=>"max-width: 200px !important; white-space: nowrap")" />
                        <DataGridColumn TItem="Employee" Field="@nameof( Employee.City )" Caption="City">
                            <CaptionTemplate>
                                <Icon Name="IconName.City" /> @context.Caption
                            </CaptionTemplate>
                        </DataGridColumn>
                        <DataGridColumn TItem="Employee" Field="@nameof( Employee.Zip )" Caption="Zip">
                        </DataGridColumn>
                        <DataGridDateColumn TItem="Employee" Field="@nameof( Employee.DateOfBirth )" DisplayFormat="{0:dd.MM.yyyy}" Caption="Date Of Birth" Editable />
                        <DataGridNumericColumn TItem="Employee" Field="@nameof( Employee.Childrens )" Caption="Childrens" ReverseSorting="true" Editable Filterable="false" />
                        <DataGridSelectColumn TItem="Employee" Field="@nameof( Employee.Gender )" Caption="Gender" Editable Data="EmployeeData.Genders" ValueField="(x) => ((Gender)x).Code" TextField="(x) => ((Gender)x).Description" />
                        <DataGridColumn TItem="Employee" Field="@nameof( Employee.Salary )" Caption="Salary" Editable Width="140px" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" TextAlignment="TextAlignment.End">
                        </DataGridColumn>
                        <DataGridCheckColumn TItem="Employee" Field="@nameof(Employee.IsActive)" Caption="Active" Editable Filterable="false">
                            <DisplayTemplate>
                                <Check TValue="bool" Checked="context.IsActive" Disabled ReadOnly />
                            </DisplayTemplate>
                        </DataGridCheckColumn>
                    </DataGridColumns>
                </DataGrid>

Please let us know more detailed steps to reproduce this issue. It's better if you can give us a reproduceable of the problem.

[github-actions]

Hello @albason, thank you for your submission. The issue was labeled "Status: Repro Missing", as you have not provided a way to reproduce the issue quickly. Most problems already solve themselves when isolated, but we would like you to provide us with a reproducible code to make it easier to investigate a possible bug.

[e-ademi]

<div>
    <DataGrid TItem="TestData"
              Data="@_dataList"
              Responsive
              ShowPager
              ShowPageSizes>
        <DataGridColumns>
            <DataGridColumn TItem="TestData" Field="@nameof(TestData.CompleteName)" Caption="Name" HeaderCellStyle="max-width: 200px !important; " CellStyle="@((i)=>"max-width: 200px !important; white-space: nowrap")" />
            <DataGridColumn TItem="TestData" Field="@nameof( TestData.FirstName )" Caption="FirstName" />
            <DataGridColumn TItem="TestData" Field="@nameof( TestData.LastName )" Caption="LastName" />
        </DataGridColumns>
    </DataGrid>
</div>


@code {
    public class TestData
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string CompleteName { get; set; }
    }
    private List<TestData> _dataList = new List<TestData>();

    static Random random = new Random();
    static string[] firstNames = { "John", "Alice", "Bob", "Emma", "Michael", "Olivia", "William", "Sophia" };
    static string[] lastNames = { "Smith", "Johnson", "Brown", "Taylor", "Miller", "Wilson", "Moore", "Davis" };


    protected override Task OnParametersSetAsync()
    {
        var longName = new TestData
            {
                FirstName = "Maximilian-Theodor",
                LastName = "von Hohenstein-Waldenburg-Schwarzenberg-Rosenberg",
                CompleteName = "Maximilian-Theodor von Hohenstein-Waldenburg-Schwarzenberg-Rosenberg",
            };
        _dataList.Add(longName);
        for (int i = 0; i < 15; i++)
        {
            string firstName = firstNames[random.Next(firstNames.Length)];
            string lastName = lastNames[random.Next(lastNames.Length)];
            var testData = new TestData
                {
                    FirstName = firstName,
                    LastName = lastName,
                    CompleteName = firstName + " " + lastName,
                };
            _dataList.Add(testData);
        }
        return base.OnParametersSetAsync();
    }

}

@David-Moreira You can see in this example that the max-width of 200px is exceeded.

[David-Moreira]

Hello @albason
It's not clear that the browser would interpret the max-width as you'd expect in a table column.

Try using Width="200px"

https://stackoverflow.com/questions/61471694/how-can-i-set-max-width-of-table-columns
https://css-tricks.com/faking-min-width-on-a-table-column/