Изображение ионной карты в заголовке карты автоматически изменяется при отображении текста - PullRequest
Новая
       13

Изображение ионной карты в заголовке карты автоматически изменяется при отображении текста

0 голосов
/ 07 мая 2019

У меня есть 2 карты на странице: 

<ion-header>
    <ion-navbar>
        <ion-title>Home</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-card class="offersCard">
        <ion-card-header>
            <b>Company Name</b>
      <br/>
      <b>Dealer</b>
    </ion-card-header>
    <ion-card-content>
      <div>
        <div class="floatLeft imgStyle">
          Image
        </div>
        <div class="floatRight">

          <div>
          Offer Descriptions:
          <br/>
          Offer Descriptions:... 
          Offer Descriptions:...
          Offer Descriptions:... 
          Offer Descriptions:...
          Offer Descriptions:...
          </div>
        </div>
      </div>
      <div>
        <div class="floatLeft alignTxt">
          Price:
          d
        </div>
        <div class="floatRight fullBtn">
          <button ion-button primary>CHECK OFFER</button>
        </div>
      </div>
    </ion-card-content>
  </ion-card>
  <ion-card class="offersCard">
        <ion-card-header>
            <b>Company Name</b>
      <br/>
      <b>Dealer</b>
    </ion-card-header>
    <ion-card-content>
      <div>
        <div class="floatLeft imgStyle">
          Image
        </div>
        <div class="floatRight">

          <div>
          Offer Descriptions:
          <br/>
          Offer Descriptions:
          </div>
        </div>
      </div>
      <div>
        <div class="floatLeft alignTxt">
          Price:
          d
        </div>
        <div class="floatRight fullBtn">
          <button ion-button primary>CHECK OFFER</button>
        </div>
      </div>
    </ion-card-content>
  </ion-card>
</ion-content>

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

.offersCard{
  .floatRight{
    float: right;
    white-space: normal;
    margin-left: 4em;
  }
  .floatLeft{
    float: left;
    width: 10em;
    vertical-align: middle;
  }
  div{
    display: flex;
  }
  .imgStyle{
    width: 150px;
    height: 150px;
  }
  .fullBtn{

    float: right;
    margin-right: 0em
  }
  .alignTxt{
    margin-top: 1em;
  }
}

enter image description here

Кроме того, моя кнопка «Проверить предложение» установлена ​​с плавающей точкой вправо, но она остается в середине карты.

Вот полный рабочий stackblitz

Ответы [ 2 ]

1 голос
/ 07 мая 2019

Проверьте обновленный https://stackblitz.com/edit/ionic-xqm7sa

Необходимо указать свойство justify для fullBtn 

.fullBtn{
    justify-content: flex-end;
    float: right;
    margin-right: 0em;
}
1 голос
/ 07 мая 2019

Проверьте обновленный https://stackblitz.com/edit/ionic-acboxj

Необходимо указать ширину для floatRight 

.floatRight{
    float: right;
    white-space: normal;
    margin-left: 2em;
    width: calc(100% - 150px - 2em);
}
...