Grid in bar-subheader doesn't work

ionic-v1
1

Hi,

i’m trying to insert a grid with two columns in the bar-subheader.

But with this syntax doesn’t work:

<div class="bar bar-subheader">
    <div class="row">
        <div class="col-70">
            <h2 class="">sub-title1</h2>
        </div>
        <div class="col-30">
            <h2 class="">sub-title2</h2>
        </div>
    </div>
</div>

Does anyone know why?

Thanks.

2

I believe you need to include the “col” class on the child divs of the row.

3 
<ion-view view-title="Search">
<ion-header-bar>
	<div class="bar bar-header bar-positive">
  <h1 class="title">Header</h1>
</div>
<div class="bar bar-subheader bar-assertive">
  <div class="row">
  	<div class="col col-70">
  	<p>FooFooFooFooFooFooFooFooFooFooFooFooFooFooFooFooFooFooFooFooFoo</p>
  	</div>
  	<div class="col col-20">
  	<p>Bar</p>
  	</div>
  </div>

</div>
</ion-header-bar>
  <ion-content>
    <h1>Search</h1>
  </ion-content>
</ion-view>

Works here

4

Thanks to all for the support.

Looking deep in the problem using the siddartha’s example, i realized that in ionic.css .col-70 and .col-30 don’t exist.

I think that the documentation could create a little bit of confusion because in the Grid: Explicit Column Sizes section says:

An advantage with this grid system is that you only have to state the percentage for the column that needs it, and the others will still evenly divide up the available areas.

But in the ionic.css there aren’t all the decimal percentages.