All columns collapse when resizing the browser window.

I’m submitting a …

• bug report

Current behavior

• Chrome (on 2.0.0 or 2.1.1): When the window is resized, the column layout collapses.
• FF/Safari (on 2.0.0): When the window is resized, the column layout collapses.
• FF/Safari (on 2.1.1): Columns are collapsed on page load.

Expected behavior

The table should retain it’s columns as it is resized (always filling the width of it’s parent).

Reproduction of the problem

I couldn’t get the suggested Plunker link working so I’m posting a gif…

What is the motivation / use case for changing the behavior?

A user should be able to resize the browser window as the table expands/contracts while retaining columns.

Please tell us about your environment:

• NPM / OSX / Karma / angular-cli

*Table version:

• Bug present on 2.0.0 or 2.1.1 (didn’t test 2.1.0)
• Not present on previous 1.x.x versions

*Angular version: 2.2.4

*Browser:

• Chrome
• In Firefox and Safari it seems that the layout bug presents on load; before resizing.

*Language: TypeScript 2.1.1

[benjamincharity]

Update

In case anyone else comes across this looking for a solution:

• a) On load, the datatable layout is broken
• b) Switching tabs, fixes the layout
• c) Resizing the window breaks the layout again
• d) After a resize, switching tabs no longer fixes the layout

Example:

Current workaround

• Set the initially selected tab to one that isn’t the first one (so if the first tab should be shown first, initially set the second tab as the default tab.
• Then in your ngOnInit method set a timeout for 100ms and dynamically set the 1st tab as the selected tab.

export class YourComponent implements OnInit {
    // I really want the tab index of `0` to be shown initially, but we default to the 2nd tab
    public currentTabIndex = 1;

    ngOnInit() {
            setTimeout(() => {
                // This will move to the first tab which will have a correct layout now
                this.currentTabIndex = 0;
            }, 100);
    }
}

<md-tab-group
  md-stretch-tabs
  flex
  [selectedIndex]="currentTabIndex"  <!-- this is what we are changing in ngOnInit -->
  (selectChange)="tabSelected($event)"
>
</md-tab-group>

Note: Dynamically setting the active tab doesn’t work until @angular/material: 2.0.0-alpha.11-2

[arturtupiassu]

Any lucky, guys? I’m stuck with the same problem …