angular4 + материал: как отображать вход и значок в одной строке - PullRequest
Новая
       5

angular4 + материал: как отображать вход и значок в одной строке

0 голосов
/ 20 мая 2018

Я использую эту форму:

Form Screenshot

Мне бы хотелось, чтобы значок находился в той же строке, что и вход.

Для имени и имени, он работал, когда окружал их div.Я не нашел, что добавить в .css для достижения этого для URL.Вы знаете, как это сделать?

Обратите внимание, что входные данные Имя и Имя не занимают всю строку.Я не знаю почему.Есть идеи? 

.mat-card {
  width: 450px;
  margin: auto;
  margin-top: 50px;
}
form {
  display: flex;
  flex-direction: column;
}

.cardtitle {
  font-size: 20px;
}

.mat-input-container {
  margin-bottom: .3em;
}

.img_portrait {
  margin-left: auto;
  margin-right: auto;
}
.urlbio {
  width: 350px;
}
.urlbio_icon {
   style: inline-block;
}

<mat-card>

  <mat-card-header>
    <mat-card-title class="cardtitle"> {{ formTitle }} </mat-card-title>
  </mat-card-header>

  <mat-card-content> <!-- {{{ -->

    <form [formGroup]="editAuthorForm" (ngSubmit)="editAuthor()">

      <div> <!-- {{{ Prénom Nom -->
        <mat-input-container>
          <input matInput type="text" placeholder="Prénom" formControlName="firstname" >
        </mat-input-container>
        <mat-input-container>
          <input matInput type="text" placeholder="Nom" formControlName="name" >
        </mat-input-container>
      </div> <!-- }}} -->
      <div> <!-- {{{ Dates -->
        <mat-input-container>
          <input matInput type="text" placeholder="Né(e) le" formControlName="birthdate" >
        </mat-input-container>
        <mat-input-container>
          <input matInput type="text" placeholder="Décédé(e) le" formControlName="deathdate" >
        </mat-input-container>
      </div> <!-- }}} -->
      <!-- {{{ Portrait -->
      <mat-input-container>
        <input matInput type="text" placeholder="Lien portrait" formControlName="urlimg" >
      </mat-input-container>
      <div *ngIf="(imgToDisplay$ | async) as img"  class="img_portrait">
        <img src="{{ img }}" height="150px">
      </div> <!-- }}} -->
      <!-- {{{ bio -->
       <div>
       <mat-input-container class="urlbio">
        <input matInput type="text" placeholder="Lien biographie" formControlName="urlbio" class="urlbio">
       </mat-input-container>
       <div *ngIf="(urlToDisplay$ | async) as url" class="urlbio_icon" >
        <a href="{{ url }}" target="urlbio" ><mat-icon>launch</mat-icon></a>
      </div>
      </div>
      <!-- }}} -->

      <!-- {{{ Boutons -->
      <mat-card-actions style="text-align:center;">
        <button mat-raised-button color="primary" style="margin:auto" type="submit" [disabled]="!editAuthorForm.valid"> Enregistrer </button>
        <button mat-raised-button style="margin:auto" type="button" (click)="cancelEditing()"> Annuler </button>
      </mat-card-actions> <!-- }}} -->

    </form>

  </mat-card-content> <!-- }}} -->

</mat-card>

1 Ответ

0 голосов
/ 21 мая 2018

Просто добавьте это в CSS-файл: 

.urlbio_icon {
  display: inline-block;
}
...