CODEWITHSUNDEEP
htmlcss
helloworld
helloworld

Reputation: 1042

Dynamically changing a property of a css class

I am trying to build chrome like tabs which can dynamically assign a width to the tabs based on the number of tabs. I have the following css class:

.myTab{
   width: 100px;
}

On every add new tab, or close an existing tab, I compute the width of each tab by dividing the total width of parent div by no of tabs.

Here is my html code:

<div class="myTabList">
    <div class="myTab" *ngFor="let tab of tabs; let i = index" >
        {{i + 1}}
    </div>

</div>
<button class="btn btn-default addTabButton" (click)="addMyTab()"></button>

Now, for the myTab css class, I want to change the width dynamically. One method is to iterate over my entire list of tabs and change the width. But I was thinking if it is possible to just the change the width property of myTab class. If that is possible, no need to iterate over the entire tab list as the class is applied to all the tabs. Is changing property of a css class even possible in css?

Update I also need the tabs width not more than a max-width to ensure when there are few tabs, they don't occupy the entire width. This is why using table and table-cell doesn't help.

Upvotes: 0

Views: 96

Answers (1)

Paulie_D
Paulie_D

Reputation: 115362

CSS-tables can do that.

.mytab {
  border: 1px solid red;
  height: 25px;
  display: table-cell;
}

.myTabList {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin-bottom: 1em
}
<div class="myTabList">
  <div class="mytab"></div>
  <div class="mytab"></div>
  <div class="mytab"></div>
  <div class="mytab"></div>
  <div class="mytab"></div>
</div>

<div class="myTabList">
  <div class="mytab"></div>
  <div class="mytab"></div>
  <div class="mytab"></div>
  <div class="mytab"></div>
</div>

<div class="myTabList">
  <div class="mytab"></div>
  <div class="mytab"></div>
</div>

Upvotes: 1

Related Questions