I have a class with 4 different columns.
div class="mainContent">
<div class="left-Col-1" *ngIf="data-1">
</div>
<div class="left-Col-2" *ngIf="!data-1">
</div>
<div class="right-Col-1" *ngIf="data-2">
</div>
<div class="right-Col-2" *ngIf="!data-2">
</div>
</div>
Basicly i created a flexbox where i show two colums. If there's no data-1 in the first column i show div-right-2, and the same happens when theres no data-2, where i show div-left-2. If they both have data i show div-left-1 and div-right-1. My css looks like this:
.mainContent > *:nth-child(1){
display: flex;
flex-direction: column;
flex-basis: 70%;
padding: 0;
}
.mainContent > *:nth-child(2){
display: flex;
flex-direction: column;
flex-basis: 30%;
padding: 0;
}
The problem is that i want to change flex-basis to 50% in both div's if there is no data loaded (if first div is "left-div-2" and the second div "right-div-2"). Is that possible only using css or do i need to write some fucntion on typescript?
Ty for your help.
You might be confusing yourself by using an odd/even selector that you don't understand. Your selector splits your divs into odd and even children and the only difference is the flex-basis is 70% for the odd ones and 30% for the even. With the change you are describing you have 3 different values for 4 different classes, so don't use the odd even thing. Angular is going to remove two of those divs based on the content of data-1 anyway.
Since you are using four different classes for your four divs you might as well use them to specify what flex-basis you want for each. See if you can understand what this css does.
.mainContent{
display: flex;
flex-direction: column;
padding: 0;
}
.mainContent .left-Col-1{
flex-basis: 70%;
}
.mainContent .right-Col-1{
flex-basis: 30%;
}
.mainContent .left-Col-2, .mainContent .right-Col-2{
flex-basis: 50%;
}
The best would probably be to use classes that are more descriptive like full/empty and primary/secondary. That would make your code more clear and easy to manage.