Как положить карты рядом в Angular Материал? - PullRequest
Новая
       6

Как положить карты рядом в Angular Материал?

0 голосов
/ 18 апреля 2020

Я не уверен, что какой-то другой CSS портит способ создания сайта, но я не могу заставить две angular -материальные карты оставаться рядом. Как я могу это сделать? 

<div class="container">
          <div class="">
            <mat-card>
              <mat-card-header>
                <mat-card-title>Leading Organization</mat-card-title>
                <mat-card-subtitle></mat-card-subtitle>
              </mat-card-header>

              <mat-divider inset="true"></mat-divider>

              <mat-card-content>

                <div class="col s6">

                  <label>Strategic perspective </label>
                  <p class="range-field">

                    <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Strategic"></mat-slider>

                  </p>

                </div>

                <div class="col s6">

                  <label>Being a quick study </label>
                  <p class="range-field">

                    <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Quick"></mat-slider>

                    <!--<input type="text" id="quick" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Quick" required />-->
                  </p>

                </div>

                <div class="col s6">

                  <label>Decisiveness</label>
                  <p class="range-field">

                    <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Decisive"></mat-slider>
                    <!--<input type="text" id="decisiveness" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Decisive" required />-->
                  </p>
                </div>

                <div class="col s6">

                  <label>Change management</label>
                  <p class="range-field">

                    <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Change"></mat-slider>

                    <!--<input type="text" id="change" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Change" required />-->
                  </p>
                </div>

              </mat-card-content>


            </mat-card>


            <mat-card>
              <mat-card-header>
                <mat-card-title>Leading Self</mat-card-title>
                <mat-card-subtitle></mat-card-subtitle>
              </mat-card-header>

              <mat-divider [inset]="true"></mat-divider>

              <mat-card-content>

                <div class="col s6">
                  <label>Taking initiative</label>
                  <p class="range-field">

                    <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Taking"></mat-slider>

                    <!--<input type="text" id="taking" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Taking" required />-->
                  </p>
                </div>

                <div class="col s6">
                  <label>Composure </label>
                  <p class="range-field">

                    <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Composure"></mat-slider>

                    <!--<input type="text" id="composure" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Composure" required />-->
                  </p>
                </div>

                <div class="col s6">
                  <label>Balance between personal and work life </label>
                  <p class="range-field">

                    <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Balance"></mat-slider>

                    <!--<input type="text" id="balance" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Balance" required />-->
                  </p>
                </div>

                <div class="col s6">
                  <label>Self-awareness </label>
                  <p class="range-field">

                    <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_SelfAware"></mat-slider>

                    <!--<input type="text" id="seflawareness" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_SelfAware" required />-->
                  </p>
                </div>

                <div class="col s6">
                  <label>Career management </label>
                  <p class="range-field">

                    <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Career"></mat-slider>

                    <!--<input type="text" id="career" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Career" required />-->
                  </p>
                </div>

              </mat-card-content>

            </mat-card>



          </div>

          <mat-card>
            <mat-card-header>
              <mat-card-title>Leading Others</mat-card-title>
              <mat-card-subtitle></mat-card-subtitle>
            </mat-card-header>

            <mat-divider [inset]="true"></mat-divider>

            <mat-card-content>

              <div class="col s6">

                <label>Leading employees</label>
                <p class="range-field">

                  <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Leading"></mat-slider>

                  <!--<input type="text" id="leading" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Leading" required />-->
                </p>
              </div>

              <div class="col s6">

                <label>Confronting problem employees</label>
                <p class="range-field">

                  <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Confront"></mat-slider>

                  <!--                    <input type="text" id="confront" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Confront" required />-->
                </p>
              </div>

              <div class="col s6">

                <label>Participative </label>
                <p class="range-field">

                  <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Confront"></mat-slider>

                  <!--<input type="text" id="participative" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Participative" required />-->
                </p>
              </div>

              <div class="col s6">

                <label>Building collaborative relationships </label>
                <p class="range-field">

                  <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Build"></mat-slider>

                  <!--<input type="text" id="buid" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Build" required />-->
                </p>
              </div>

              <div class="col s6">
                <label>Compassion</label>
                <p class="range-field">

                  <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Compassion"></mat-slider>

                  <!--<input type="text" id="compassion" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Compassion" required />-->
                </p>
              </div>

              <div class="col s6">
                <label>Putting people at ease</label>
                <p class="range-field">

                  <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Putting"></mat-slider>

                  <!--<input type="text" id="putting" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Putting" required />-->
                </p>
              </div>

              <div class="col s6">
                <label>Respect for differences</label>
                <p class="range-field">

                  <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Respect"></mat-slider>

                  <!--<input type="text" id="respect" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Respect" required />-->
                </p>
              </div>

            </mat-card-content>

          </mat-card>




          <mat-card>




            <mat-card-actions>

              <button type="submit" class="btn waves-effect waves-light blue darken-4"
                      [disabled]="!predictionForm.valid">
                Predict
                <i class="material-icons right">cloud</i>
              </button>

              <span class="right"></span>

              <a class="btn waves-effect waves-light right"
                 (click)="resetForm()">
                Reset
                <i class="material-icons right">clear</i>
              </a>

            </mat-card-actions>


          </mat-card>

1 Ответ

1 голос
/ 23 апреля 2020
Матрица

отображается как блок, это означает, что вам нужно добавить некоторые свойства css к родителю или самой карте. Это базовый c пример использования flex-box: 

<div style="display: flex;">
    <mat-card style="flex: 1 1 auto;">Card 1</mat-card>
    <mat-card style="flex: 1 1 auto;">Card 2</mat-card>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...