Высота карты реагирует на каждый экран - PullRequest
Новая
       8

Высота карты реагирует на каждый экран

2 голосов
/ 04 февраля 2020

У меня есть ионная карта с несколькими опциями (число опций является динамической c), я хочу, чтобы она была отзывчивой в зависимости от опций и размера экрана. Я реализовал его с помощью max-height, он отлично работает для мобильных и настольных компьютеров, но когда я подключаю его к мониторам разных размеров (2000px и т. Д. c), он не реагирует. 

 <ion-card class="inputOptions">
    <ion-card-content class="wrapper">
      <div
        class="radio-list"
        mode="md"
        *ngFor="let option of data"
      >
        <ion-radio
          value="{{ option }}"
          (click)="Selected(option)"
          mode="md"
          [checked]="option === value"
          style="cursor:pointer;"
        >
        </ion-radio>
        <ion-label
          type="radio"
          style="cursor:pointer;"
          (click)="Selected(option)"
          class="choice"
          >{{ option }}</ion-label
        >
      </div>
    </ion-card-content>
  </ion-card>


.wrapper {
  height: auto;
  padding: 5px 10px;
  max-height: 100%;
  margin-left: -12px;
  margin-top: -8px;
  margin-bottom: -8px;
  overflow: auto;
}

ion-card {
  border: none;
  margin: 0;
  height: auto;
  padding: 5px 10px;
  border-radius: 8px;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.2);
  font-size: 12px;
  .radio-list {
    --min-height: 20px;
    margin: 8px 0;
    position: relative;
    padding-left: 25px;
    ion-radio {
      width: 20px;
      height: 20px;
      background-color: var(--white);
      margin-right: 8px;
      position: absolute;
      left: 0;
      top: 2px;
    }
    ion-label {
      width: 448px;
      font-size: 16px;
      line-height: 1.25;
      color: #191919;
      vertical-align: bottom;
    }
  }
}



@media only screen and (max-width: 375px) {
  .wrapper {
    max-height: 140px;
  }
}

1 Ответ

0 голосов
/ 05 февраля 2020

Попробуйте: 

@media only screen and (max-width:6000px) {
   .wrapper {
    max-height: 140px;
  }
}
...