CODEWITHSUNDEEP
twitter-bootstrapangular
Janier
Janier

Reputation: 4402

how to give column width based on text length/presence

I am using angular and bootstrap.

<div class="row">
<div class="col-xs-9"> someText1 </div>
<div class="col-xs-3" *ngIf="somecondition"> someText2 </div>
</div>

both someText1 ,someText2 are dependent on the somecondition I want the first div to take full width if the second div is not shown. Becausesin that case , someText1 will be longer text becacuse of our business rule. I achieved it using

<div class="somecondition?col-xs-9:col-xs-12"> somevalue </div>

But is this the right way to achieve this?are there any bootstrap solutions?may be some kind of pulling or automatic adjusting

Upvotes: 0

Views: 399

Answers (1)

Vega
Vega

Reputation: 28701

I would rather do like this:

<div [ngClass]="someCondition? 'col-xs-9' : 'col-xs-12'">somevalue</div>

or

<div [ngClass]=" {'col-xs-9' : someCondition, 'col-xs-12' : !someCondition}"> somevalue </div>

or this:

<div *ngIf="someCondition; then temp1; else temp2"> </div>

<ng-template #temp1>
  <div  class="col-xs-9">
     SomeText1 when someCondition = true
  </div>
</ng-template> 

<ng-template #temp2>
  <div class="col-xs-12">
     SomeText1 when someCondition = false
  </div>
  <div>SomeText2</div>
</ng-template>

DEMO

Upvotes: 1

Related Questions