New Responsive ion-grid

Ionic Framework ionic-v3
1

In the new responsive ion-grid, How can I hide one ion-col depend on mobile device size?

For example, I have two ion-cols and one ion-col will only display in small device and not in all device. So, how can I hide this col in large device?

3 Likes
2

In bootstrap 3 they have class like “hidden-xs”, do we have any thing like that? @brandyshea @mhartington

1 Like
3

Not yet. It’s on my list of things to add! :smile:

2 Likes
4

Any chance you can make a demo of this for Ionic Creator?
Thank you Brandy.

5

Hey @jrunfitpro, Ionic 2 isn’t supported in Creator yet. Did you mean the grid for Ionic 1? cc @mattkremer

6

Darn, I thought Creator was a new product and assumed it was Ionic2. Any idea when Creator will use Ionic2?

7

We don’t have a timeline, but they are actively working on it. There’s some more information on it here:

8

Slightly different subject. Would the body shaped progress meter work in Creator? I sort of attempted making it, but couldn’t get it just right.

9

another thing that would be useful and seems spotty right now is conditional col widths

eg.

<ion-row>
    <ion-col col-12 [col-md-6]="someCondition">
        Content 1
    </ion-col>
    <ion-col col-12 col-md-6 [hidden]="someCondition">
        Content 2
    </ion-col>
</ion-row>

Right now that doesn’t seem to work correctly but it’s not clear if it should

1 Like
10

So the grid is mostly CSS right now. All of the column attributes are just CSS attributes. For example:

[col-md-auto] {
  flex: 0 0 auto;

  width: auto;
}

In order to dynamically add attributes you need to use the following syntax:

<ion-col col-12 [attr.col-md-6]="someCondition ? '' : null">
  Content 1
</ion-col>

The syntax you wrote is for property binding in Angular. For more info on this:

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#property-binding
https://angular.io/docs/ts/latest/guide/template-syntax.html#!#other-bindings

Here’s a good description on the syntax for dynamic attribute binding: https://github.com/angular/angular/issues/2869#issuecomment-123032491

4 Likes
11

Will give that a try, thanks!

[edit] - that works, much appreciated.

12

Awesome - any timeline on when hidden columns will be available?

Also - is there a way to make the font-size smaller depending on the breakpoint?

13

we are waiting for it also!
Meantimes I will use @media condition I suppose

14

is this available now ?