CODEWITHSUNDEEP
htmlcssangularjs
calthoff
calthoff

Reputation: 386

ng-repeat horizontal images

I am trying to make a list of images horizontal. They keep displaying vertical. Any idea what I am doing wrong?

 <div ng-repeat="i in product.images">
    <ul id="navlist">
        <li>
            <img class="thumbnail" ng-src="{{i.image}}"> </img>
        </li>
    </ul>
    </div>

#navlist li
{
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}

Upvotes: 0

Views: 6420

Answers (3)

Shehryar Abbasi
Shehryar Abbasi

Reputation: 378

calthoff, if you remove the ul, li and float the images..then how about this for simplicity's sake:

<div ng-repeat="i in product.images">
     <img class="thumbnail" ng-src="{{i.image}}">
</div>


img
{
    float: left;
    padding-right: 20px;
}

Upvotes: 1

Jennifer Nelson
Jennifer Nelson

Reputation: 76

You need to put the 'ng-repeat' in the li tag (not the div), otherwise you are repeating the entire div, which is not inline. Here's a link to a CodePen with this code http://codepen.io/jwncoexists/pen/XbdOVY

<body ng-app="ImageDemo">
  <div ng-controller="Demo.controller">
    <div>
      <ul id="navlist">
        <li ng-repeat="i in product.images">
          <img class="thumbnail" ng-src="{{i.image}}"> 
        </li>
      </ul>
    </div>
  </div>
</body>

Upvotes: 5

Steve Yancharas Jr.
Steve Yancharas Jr.

Reputation: 163

<div ng-repeat="i in product.images">
<ul id="navlist">
    <li>
        <img class="thumbnail" ng-src="{{i.image}}" />
    </li>
    <li>
        <img class="thumbnail" ng-src="{{i.image}}" />
    </li>
</ul>
</div>

< img > tags are self-closing, your code should work like this.

Upvotes: 0

Related Questions