角-单击flexbox网格单元以全宽扩展下方区域

Question

I have something like calendar grid using flexbox inside a ionic 3 project.

The cells are one array

<div class="sb-calendar-wrapper">
    <div class="sb-calendar-month">
        <div class="sb-calendar-row">
            <div class="sb-calendar-cell sb-cell-labels sb-week-day" *ngFor="let day of sbcalendar.dayLabels">
                {{day}}
            </div>
        </div>
        <div class="sb-calendar-row">
            <div class="sb-calendar-cell sb-cell" *ngFor="let day of calendarDays, let j=index" (click)="openCalendarDay(day)" [ngStyle]="{'height': (day.isOpen) ? '300px' : '60px'}">{{j}}
            </div>
        </div>
    </div>
</div>

.sb-cell {
    position: relative;
    border-bottom: 1px solid rgba(130, 171, 183, 0.2);
    padding: 5px;
    height: calc((100vh - 150px)/6);
    .sb-calendar-day-list{
        position: absolute;
        width: 100vw;
        left: 0;
        top:calc((100vh - 150px)/6);
        background: #ccc;
        height: calc( 300px - calc((100vh - 150px)/6));
    }
}

When I click on any day, i want the "row" to expand to display an area which I can use for eg displaying items of that cell.

The problem I'm facing is how to position that list element, so that i will fill the entire space or width. With position:relative of the cell I can position everything fine except for the left:0, which doesnt work for most cells.

In summary when i click any day, a box that fills the entire view width should expand. thanks for any suggestions!

EDIT1

I don't want to create manual rows after each n-cell. The cell array should stay as a single array while the flexitem widths controls how many items are in each row.

Answer 1

I think you can organize those days on the same line as a row. At the end of each row, you can add a place holder div with an ng-if condition. Whenever you click on a day of that row, you can check the row index for showing the div or not. That div will hold an area that you want.

html:

<div class="flexbox-row" ng-repeat="row in rows track by $index">
  <div class="flexbox-col clickable" ng-click="showRow($index)">
    1
  </div>
  <div class="flexbox-col clickable" ng-click="showRow($index)">
    2
  </div>
  <div class="flexbox-col clickable" ng-click="showRow($index)">
    3...
  </div>
  <!-- Place holder div -->
  <div ng-if="showRow() === $index">
    <div data-custom-directive></div>
  </div>
</div>

Show row code:

scope.showRow = function ($index) {
  // Return activeRow
  if ($index === undefined) {
    return scope.activeRow;
  }
  // Hide if same row
  if ($index === scope.activeFlight) {
    scope.activeRow = null;
    return;
  }
  // Show row
  scope.activeRow = parseInt($index);
};