Динамическая ширина ионных колонн по длине содержимого

Question

У меня динамический ионную систему 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 колонки в этом, но один условно. Я хочу, чтобы название занимало полный объем, если нет претензий. Но имейте при себе кнопку fab, если есть претензии.

Но с вышеуказанной настройкой кнопка выходит за пределы видимости за пределами div, если заголовок длинный. Я мог бы добавить width-80 в колонку title. Но тогда это займет всего 80% пространства, даже если претензий нет.

Как я могу убедиться, что все содержимое видно с полным свободным пространством, если существует переполнение заголовка, переполнение скрыто.

Answer 1

Вы можете применить class для 1-го ion-col условно, исходя из hunt.claims.length. Благодаря этому вы можете воспользоваться спецификацией CSS для повторного применения нового правила CSS, если класс присутствует на первом ion-col.

<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%; 
}