Can i make 2 column grid with creator


#1

Hello Guys,
I would like to know if i can have 2 grid column with ionic creator for drag 'n drop ?


#2

I second this question…


#3

I “third” it! It’s very important for creating tablet apps.


#4

It’s not a perfect drag and drop solution… more of a work around for displaying two images next to each other.

I’ve used the button bar and converted each button into HTML (i only needed two so deleted one).

Before converting to HTML i also changed the button width to inline as I found the next component would hide under it.

I then used an image component and uploaded an image, converted it to HTML and then copy & pasted that into the buttons html.

To make the image a link I used the ui-sref code creator in the ‘how to make a page link’ in the right column.

*** just having issues with the images displaying when exporting the package, will keep you updated when i figure it out.


#5
  • add a list
  • add a container list item, set it’s css class to row
  • for each column you want, add an object, and set it’s css class to col

see http://ionicframework.com/docs/components/#grid


#6

Turns out there was a bug with ionic creator but they have fixed it and now it all works perfectly.

Also remember you need to keep the image saved in your project so that the asset is there. either create a page with no links to it or set the image size to 0%.

These instruction may not be very good (I’m self taught) so I’m happy to answer any questions or elaborate


#7

Hey, tried to implement that, I keep getting one narrow column only with all items stacked in it, can you change it from the level of Creator?


#8

You have to use the CSS classes, I haven’t found another way to do it from within Creator. It looks like there might be a bug with the images, they don’t seem to take the css class for explicit column sizes.

You can use the HTML component and use this code, just put your content in:

<div class="row">
  <div class="col col-75">.col.col-75 your content here in first column</div>
  <div class="col">.col your content here in second column</div>
</div>