Cfrgtkky

 <div class="content">

    <div fxFlex="100" fxLayout="column" class="specifique">

      <span class="text">Osmose</span>

      <div tabindex="4" class="siga-choix-themes-component">

        <div fxLayout="row">

          <mat-form-field class="osmoseForm-full-width">

            <input type="text" placeholder="Osmose(s)" aria-label="Number" matInput maxlength="8" formControlName="osmoses"

              [matAutocomplete]="auto" required minlength="8" (blur)="onBlur()">

            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayOsmoses">

              <mat-option *ngFor="let osmose of osmoses trackBy: trackById" [value]="osmose">

                {{ osmose.code }}

              </mat-option>

            </mat-autocomplete>

            <div class="mat-select-arrow-wrapper">

              <div class="mat-select-arrow" [ngClass]="{'mat-select-arrow-down': !auto.isOpen, 'mat-select-arrow-up': auto.isOpen}"></div>

            </div>

            <button class="space-close" mat-button *ngIf="osmosesControl.value" matSuffix mat-icon-button aria-label="Clear"

              (click)="osmosesControl.setValue('')">

              <mat-icon>close</mat-icon>

            </button>

            <mat-hint></mat-hint>

            <mat-error *ngIf="osmosesControl.hasError('pattern')">

              <strong>

                {{'messages.osmoseCodeFormat' | translate}}

              </strong>

            </mat-error>

          </mat-form-field>

          <!-- Osmose part 2 -->

          <div class="siga-separator">&nbsp;&nbsp;</div>

          <mat-form-field class="osmose-libelle" fxFlex="40">

            <input class="" matInput formControlName="osmose_libelle">

          </mat-form-field>

        </div>

      </div>

    </div>

  </div>

</form>

So I cannot make the arrow move up to the right of the field without moving it with padding. I tried with display: inline-block, flex and it still stood in the same position. I thought it is because of the div but still to no avail.

I even tried doing it with the top or right or left or changing the position to absolute.

This is the css:

.mat-select-arrow-wrapper>div {

  display: inline-block;

  vertical-align: calc(3px);

  margin: 0;

  right: 100%;

}



.mat-select-arrow-down {

  border-left: $mat-select-arrow-size solid transparent;

  border-right: $mat-select-arrow-size solid transparent;

  border-top: $mat-select-arrow-size solid;

}



.mat-select-arrow-up {

  border-top: 0px;

  border-left: $mat-select-arrow-size solid transparent;

  border-right: $mat-select-arrow-size solid transparent;

  border-bottom: $mat-select-arrow-size solid;

}