CODEWITHSUNDEEP
javascripthtmlcssangularjs
G.Smith
G.Smith

Reputation: 141

CSS image formatting with NG-Repeat angularJS

i'm trying to format my angularJS images that populate the html, i have been trying to get the images next to each other so that 4 images display then it goes onto a new line so they are displayed in rows of 4 but when the code is coming from angular it doesn't seem to like it.. here is my html :

<span ng-repeat="x in r.selectedImageUri">
    <div style="width:25%;position:inline-block;">
         <img ng-src="{{x}}" width="100%" alt="image" style="">
         <div><button class="button button-assertive" style="width:100%;">Deletee</button></div>
    </div>          
 </span>

Also here is a screenshot of what it looks like

Screenshot

Can anyone help? Thanks.

Upvotes: 1

Views: 90

Answers (3)

Qwertiy
Qwertiy

Reputation: 21380

style="width:25%;position:inline-block;"

style="width:25%;display:inline-block;"

width="100%" alt="image" style=""

style="width:100%" alt="image"

Upvotes: 0

G.Smith
G.Smith

Reputation: 141

<div class="row">
                <span ng-repeat="x in r.selectedImageUri">
                <div style="width:100%;">

                     <div class="col">
                    <img ng-src="{{x}}" width="100%" style="max-width:200px;" alt="image" style="">
                    <div><button class="button button-assertive" style="width:100%;">Deletee</button></div>
                    </div>
                </div>

                </span>
                </div>

Upvotes: 0

Joey Ciechanowicz
Joey Ciechanowicz

Reputation: 3663

You need to use display: inline-block not position

Upvotes: 1

Related Questions