Bootstrap. Divided row on 3 col. and make chiplist items in last col appear under fixed-height first two cols

37 Views Asked by At

I have a class=row, what contains 3 cols. col-1, col-4 and col-7. col-7 is a chip-list, while col-1 is headline and col-4 is input field. I want to make the chip-list appear after 2 rows under the the col-1 nad col-4 as on the picture. Is it possible ? Here is code:

<div class="row">
    <div class="col-1 container w-100 koostaja-headline fixed-height" style="display: flex; justify-content: left; align-items: center;">
        <span>Koostaja<span style="color: red;">*</span></span>
    </div>

    <div class="col-4 container w-100 koostaja-input">
      <mat-form-field class="no-bottom-padding w-100 fixed-height">
        <input  #koostajaInput
                matInput
                type="text"
                name="koostajaInput"
                [formControl]="koostajaControl"
                [matAutocomplete]="autoKoostaja"
                [matChipInputFor]="koostajaChipList"
                (click)="focusKoostajaInput(koostajaInput)">

        <mat-autocomplete #autoKoostaja="matAutocomplete"
                          (optionSelected)="selectKoostaja($event, koostamiseForm, koostajaInput)">

          <mat-option [disabled]="isKoostajaSelected(profiil, koostamiseForm)"
                      *ngFor="let profiil of koostajaValikFiltered | async"
                      [value]="profiil"
                      class="font-size-14px">
            {{profiil.eesnimi}} {{profiil.perenimi}} {{profiil.kohtuuksusLuhend}} {{profiil.ametikohaNimetus}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </div>

    <div class="col-7 container w-100 koostaja-choosen">
      <mat-chip-list  #koostajaChipList>
        <span *ngFor="let koostaja of koostamiseForm.get('koostajad').value">
          <mat-chip *ngFor="let profiil of koostaja.profiilList"
                    [selectable]="false"
                    [removable]="true"
                    (removed)="removeKoostaja(profiil, koostamiseForm)"
                    class="font-size-14px"
                    matTooltip="{{profiil.kohtuuksusLuhend}} {{profiil.ametikohaNimetus}}">
                    {{koostaja.eesnimi}} {{koostaja.perenimi}}
          <mat-icon matChipRemove *ngIf="!isDokumentJoustanud">cancel</mat-icon>
          </mat-chip>
        </span>
        <mat-error *ngIf="koostamiseForm.get('koostajad')?.errors?.required">Koostaja on vaja lisada!</mat-error>
      </mat-chip-list>
    </div>

and picture as well: desired result

0

There are 0 best solutions below