Trouble with boxes around each list item


#1

I’ve setup a pretty simple example using ‘item-thumbnail-left’ and I’m noticing that my rendering has a box around each item.

Here’s the sample. I’ve removed the content in each box on purpose.

What is causing this outer box to appear? The ionic samples don’t seem to have this box.

<nav-page id="app-page" hide-nav-bar="false">

    <header class="bar bar-header bar-positive">
        <h1 class="title">Select An Item</h1>
    </header>


    <content class="has-header">

          <list>

            <item ng-repeat="event in events" item="event" ng-href="#/events/{{event.id}}">

                <a class="item item-thumbnail-left" >
                    <img ng-src="{{ image.base64 }}">
                    <h2>{{ event.title }}</h2>
                    <h4>{{ event.description }}</h4>
                    <h4>{{ event.timeframe }}</h4>
                    <h4>{{ event.location }}</h4>
                </a>

            </item>

          </list>

        </content>

</nav-page>

#2

In your case you probably won’t need to use the list and item directives, but you could stick with just ng-repeat and just classnames. Here’s a plunker that may help: http://plnkr.co/edit/uXQBHL?p=preview