Recommended approach for complex list formatting for tablet app

ionic-v1
1

I am not super CSS savy and tend to use what styles the framework provides, but I am looking for guidance on how to get a complicated list formatting on a list that has more space (tablet app)

I am looking to do something like:

Each list item:

[button] [Main text (one line)] [button pulled to right]
[secondary text (multiline)]
[icon][icon][icon][icon]

Options

  1. Ionic list, and item styles seems to only let you have [icon]text[button] - so this does not seem an option to me. Adding the [secondary text] and row of indicator [icons] does not qork. It also does not like two buttons on an item (tried class =‘item-button-left item-button-right’

  2. Use collection repeat with Ionic [row][col] classes. This seems to work somewhat but way too much wasted space and nested rows/cols seems to not product exactly what I want

  3. Forget any of the Ionic styles and roll my own with collection-repeat

Each item will also have a click handler BTW so either show a popup or enable displaying a hidden form area to perform actions on the item.

Any recommendations?

Thanks

2

Anyone?? - My posts lately seem to get zero responses - maybe they are dumb questions

3

You will have to use some custom CSS. I would probably build something on top of the existing ionic lists.

Add the class item-text-wrap to your list item to allow for multiple lines in a list item. Should fix one of the issues with #1.

Look into the <div> html tag and into float css. Will help you position things.

4

Thanks Adrian - that helped