Need help creating a layout like Sworkit - Much Appreciated

ionic-v1
1

Hey Ionic,

I’m creating an app in which I’d like to create a few categories displayed like so: https://cloudup.com/ccFh6W34jHH

Could an experienced Ionic’er expand on how I could do this, or possibly attach some code?

Best,

– Luca

Thank you in advance.

2

It is just a list modified a bit. Should not be much of a problem I guess.

3

There are going to be multiple ways to implement this. I threw together this codepen for example: http://codepen.io/anon/pen/myEjQb.

Obviously you need more CSS to make it look exactly like that. Hope that helps.

4

Thank you very much to both of you! You have both helped me massively.

  • Luca
6

Thanks, can’t wait to see it!

7

Hey Guys,

I’m coding this page of the app in a codepen in case I run into any problems and I have a problem: http://codepen.io/buoy/pen/azZRWZ/

The modified list is displaying some kind of frame and the page is unusually long, any recommendations on how to fix this?

– Luca

8

@luca_ Here is a basic example of the Sworkit home screen you were asking about.

Codepen

Good Luck.

1 Like
9

Hi All,

Thank you very much but I’m having another issue (sorry to be a pain!). @brandyshea - Your code works perfectly on Codepen but offline it doesn’t work, I’ve linked the css and js to the HTML but I still get a rather weird looking view: https://cloudup.com/cAR0HdfSsr5

But on my edited codepen, it looks fine: http://codepen.io/buoy/pen/yyJRjL/

Any Ideas?

Happy Holidays,

– Luca

10

Download the images to local drive !!!

11

@siddhartha - I’ve done that but its still not working and the icons still look odd at the bottom https://cloudup.com/iaNyKb23LBp, before you ask, I have also updated the code. I’ve uploaded it to GitHub: https://github.com/buoyinc/Buoy.git

Any Ideas on how to fix this?

– Luca

12

add this in your css

.item a {
    background-color : transparent !important;
}

Your markup is all messed up. You dont need all those inline style declarations. Ionic will take care most of it. You just concentrate on the look and feel. May be you should go thorough Ionic docs once again.

13

Its working! Thank you very much too all of you, have a great christmas!

14

Glad you have it working. Same to you! Happy holidays!