Сжатие календаря / ионной карты Ioni c 2 при изменении размера экрана - PullRequest
Новая
       32

Сжатие календаря / ионной карты Ioni c 2 при изменении размера экрана

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

Как я хочу, чтобы он выглядел все время.

enter image description here

Что произойдет, если дисплей станет слишком маленьким.

enter image description here

HTML

<ion-card class="has-card-footer" *ngIf="collapseCard">

  <ion-card-header tappable *ngIf="collapseCard" (click)="collapseCard = !collapseCard">
    <ion-title text-center>

      {{ viewTitle }}
    </ion-title>

  </ion-card-header>
  <ion-card-content *ngIf="collapseCard">

    <ion-row>
      <!-- Move back one screen of the slides -->
      <ion-col size="6" text-left>
        <ion-button fill="clear" (click)="back()">
          <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
        </ion-button>
      </ion-col>

      <!-- Move forward one screen of the slides -->
      <ion-col size="6" text-right>
        <ion-button fill="clear" (click)="next()">
          <ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
        </ion-button>
      </ion-col>
    </ion-row>


<calendar  
  [eventSource]="eventSource" 
  [calendarMode]="calendar.mode" 
  [currentDate]="calendar.currentDate"
  (onEventSelected)="onEventSelected($event)"
  (onTitleChanged)="onViewTitleChanged($event)"
  (onTimeSelected)="onTimeSelected($event)" 
  startHour="6"
  endHour="20"
  step="30"
  startingDayWeek="1">
</calendar>
</ion-card-content>
<button ion-button class="card-footer" *ngIf="collapseCard" (click)="collapseCard = 
!collapseCard">
Apply
</button>
</ion-card>

CSS

.has-card-footer {
padding-bottom: 15px;
}


.card-footer {
font-size: 150%;
color:white;
position: absolute;
bottom: 0;
width: 100%;
height: 15.5% !important;
background-color:#EF3024 ;
}

ion-card {
display: flex;
flex-direction: column;
width: 90% !important;
margin: 0 !important;
border-radius: 40px;
background-color: white;

}

Когда содержимое моей ионной карты становится слишком маленьким, все получает smooshed вместе. Я не хочу, чтобы все смешалось, если дисплей становится слишком маленьким. Я sh должен иметь размер c всего внутри карты, который может изменять размеры, не портя отображение содержимого.

...