离子列相对于内容长度的动态宽度答案

【问题标题】：Dynamic width of ionic columns with respect to content length离子列相对于内容长度的动态宽度
【发布时间】：2017-08-25 16:51:34
【问题描述】：

我有一个动态离子 2 网格系统

<div>
<ion-row>
  <ion-col >
    <ion-card-header class="card-header">
      {{hunt.title}}
    </ion-card-header>
  </ion-col>
  <ion-col *ngIf="!hunt.claims.length" >
    <button ion-fab mini class="new-claim">
      <ion-icon name="disc"></ion-icon>
    </button>
  </ion-col>
</ion-row>
</div>

如您所见，其中有 2 列，但有一个是有条件的。如果没有声明，我希望标题占据全部空间。但是，如果有索赔，请提供适应工厂按钮。

但是通过上述设置，如果标题很长，则按钮在div 之外不可见。我可以将width-80 添加到title 列。但是即使没有声明，它也只会占用 80% 的空间。

如何确保所有内容都可见，占用全部可用空间，以防溢出标题被隐藏。

【问题讨论】：

标签： html css angular ionic-framework

【解决方案1】：

您可以根据hunt.claims.length 有条件地为第一个ion-col 申请class。如果类出现在第一个 ion-col 上，您可以利用 CSS 特异性重新应用新的 CSS 规则。

<ion-row>
  <ion-col ng-class="{'take-full-width': !hunt.claims.length}">
    <ion-card-header class="card-header">
      {{hunt.title}}
    </ion-card-header>
  </ion-col>
  <ion-col *ngIf="!hunt.claims.length" >
    <button ion-fab mini class="new-claim">
      <ion-icon name="disc"></ion-icon>
    </button>
  </ion-col>
</ion-row>

CSS

.card-header{
   /* My older CSS for card-header */
}

.take-full-width .card-header{
   /* Change width in specific case */
   width: 100%;
}

【讨论】：