CODEWITHSUNDEEP
cssangularflexboxangular-material
Carandiru
Carandiru

Reputation: 53

Material-Tabs not shrinking correctly when using flexbox

In my app, the material tabs don't shrink correctly when the width of the page decreases when using flexbox.

I was able to replicate the issue here: https://stackblitz.com/edit/angular-xthdcw

Code:

.panel{
  padding: 24px;
  border: 1px solid black;
  margin-right: 20px;
}

.container{
  display: flex;
}
<div class="container">
<div class="panel">
<mat-tab-group>
  <mat-tab label="FirstLongText"> Content 1 </mat-tab>
  <mat-tab label="SecondLongText"> Content 2 </mat-tab>
  <mat-tab label="ThirdLongText"> Content 3 </mat-tab>
</mat-tab-group>
</div>
<div class="panel">
  TestText123
</div>
</div>

So shouldn't the material-tab-group shrink when the width of the page decreases and show the navigation arrows in the head-bar? But as you can see the second panel is out of place. So what is wrong here?

Upvotes: 2

Views: 2125

Answers (1)

ysf
ysf

Reputation: 4874

this problem has nothing to do with mat-tabs nor flex. the problem here is the elements with .panel class doesn't know how to size themselves. they are in a flex container, but there is no flex or display attribute set on them as well as any sizing attribute. so they fall back to defaults which in this case display: block. since there is no width set on those elements they take as much space as they can as explained here and since they are in a flex container with no flex-direction set, that also causes default behavior which is flex-direction: row. consequently elements with .panel class are displayed in a row and each of them take as much width as they can (which causes them to take the width of their contents). that said; in order to make things nice all you need to do is to tell .panel elements how to size themselves;

.panel {
  padding: 24px;
  border: 1px solid black;
  margin-right: 20px;
  flex: 0 0 50%; /** required to make sure that elements take 50% width no matter whether they can grow or shrink.*/
  width: 50%; /** we are telling elements to size themselves */
  box-sizing: border-box; /** is required to achieve correct size calculations otherwise all those margins/paddings mess things up */
}

here is a working demo https://stackblitz.com/edit/angular-xthdcw-hp4pdg

another solution would be to set flex-direction: column on .container because elements in a flex container with column layout take full width of parent by default. in this case .panel elements know how to size themselves and everything again work just fine.

here is demo for column layout https://stackblitz.com/edit/angular-xthdcw-p6ab2w

Upvotes: 3

Related Questions