web-dev-qa-db-ja.com

Angular 2枚のカードを並べて表示

を持っています Angular 5routingを使用しているウェブサイト。

私のコードブランチには、さまざまなデータを含むセクションを含むフォルダーがあります。

私がやった後は、私が行ったセクションを必要とするセクションをメインページに表示していますが、問題は、2 component.htmlファイルが1つにネストされている場合、情報セクションが個々の行に表示されます。

私が試してみました：

  • メインページのDIVでそれらをラップする
  • フロート：コンポーネントの左/右およびmat-card
  • 幅の設定

個人情報コンポーネントhtml

  <mat-card>
    <mat-card-title class="firstCard">Personal details</mat-card-title>
    <mat-card-content>
        <mat-form-field>
          <input matInput id="invName" placeholder="Full name" #name value="Mr Test Test" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invRef" placeholder="Investor reference" #ref value="A11111" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invId" placeholder="Investor ID" #id value="101010" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invDoB" placeholder="Date of birth" #dob value="01 January 1950" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invNino" placeholder="National Insurance Number" #nino value="AA112233A" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invMumMaidenName" placeholder="Mother's maiden name" #mummaidenname value="Test" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invFirstSchool" placeholder="First school attended" #firstschool value="St.Testo" readonly>
        </mat-form-field>
    </mat-card-content>
  </mat-card>

連絡先詳細コンポーネントhtml

  <mat-card>
    <mat-card-title class="secondCard">Contact details</mat-card-title>
    <mat-card-content>
        <mat-form-field>
          <input matInput id="invAddress" placeholder="Address" #address value="'this is a description of the some text' + \n + 'and further description'" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invPhone" placeholder="Telephone number" #tel value="01000 000 000" readonly>
        </mat-form-field>
        <mat-form-field>
          <input matInput id="invEmail" placeholder="Email address" #email value="[email protected]" readonly>
        </mat-form-field>
    </mat-card-content>
  </mat-card>

**メインページコンポーネントHTML **

<div>
   <app-personaldetails></app-personaldetails>
   <app-contactdetails></app-contactdetails>
</div>
htmlcssangularangular-forms
4
murday1983

マットグリッドまたはフレックスレイアウトを使用して、応答性を高めるためにobservableMediaを使用できます。
マットグリッドの例：

<mat-grid-list cols="2">
  <mat-grid-tile>
    <app-personaldetails></app-personaldetails>
  </mat-grid-tile>
  <mat-grid-tile>
    <app-contactdetails></app-contactdetails>
  </mat-grid-tile>
</mat-grid-list>
3
Prabhu Tiwari

フレックスレイアウトを使用してみてください。Angularを使用しているため、 Angular Flex Layoutを使用してみてください。

これはこのようなものを与えるでしょう：

<div fxLayout="row" fxLayoutAlign="start center">
   <app-personaldetails fxFlex="50%"></app-personaldetails>
   <app-contactdetails fxFlex="50%"></app-contactdetails>
</div>
5
user4676340