components icon indicating copy to clipboard operation
components copied to clipboard

bug(material/table): fixedLayout not applied

Open rengert opened this issue 2 years ago • 7 comments

Is this a regression?

  • [X] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

14.2.0

Description

If the attribute fixedLayout is set, the styling is not applied. The corresponding css classes are, but the style not. Table layout is always set to auto.

Reproduction

Steps to reproduce:

  1. set fixedLayout to true
  2. Check the style of table

Expected Behavior

The table-layout: fixed style is applied

Actual Behavior

The table-layout: auto style is applied, wenn fixedLayout is true

Environment

  • Angular:15.1.1
  • CDK/Material:15.1.1
  • Browser(s):Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): MacOs

rengert avatar Feb 03 '23 13:02 rengert

I also have this issue. Is there a fix for it?

Zacherl avatar Mar 15 '23 12:03 Zacherl

Still exists in CDK/Material v16.0.0.

charmbv avatar May 10 '23 13:05 charmbv

It is still an issue. Even though I am setting the fixedLayout property to true on the Material Table, the default table-layout: auto gets applied over 'table-layout: fixed'.

This issue has been around since the v15 update and still a problem in v16.

Screenshot 2023-06-09 at 11 21 01

Example

After some investigation in the table.scss I found this issue According to the issue, the additional 'table-layout: auto' override was added in order make the Material Table backwards compatible, since the browser default is 'auto'.

However, if someone wants to apply 'fixed' to the table there is no way to do it right now. Setting the 'fixedLayout' property to 'true' will bind the '.mdc-table-fixed-layout' to the table. This class however does not apply any styles.

In order to apply 'fixed' table layout I had to add a custom css workaround rule in my application:

.mat-mdc-table.mdc-table-fixed-layout {
    table-layout: fixed;
}

h3. Proposal If backwards compatible should be maintained, the default table-layout should be set to 'auto' without an overriding class. Then when fixedLayout addes the '.mdc-table-fixed-layout' class to the table 'table-layout: fixed' should override the default table-layout.

mbozsoki avatar Jun 09 '23 09:06 mbozsoki

Still an issue with v17 of Angular Material/CDK.

charmbv avatar Jan 22 '24 10:01 charmbv

Any resolution to this?

Ade-mir avatar Apr 30 '24 08:04 Ade-mir