G.Smith G.Smith - 6 months ago 14
Javascript Question

CSS stack angular repeats horizontal not verticle

i have a ng-repeat but for every div it creates it stacks them vertically. For this page i am scrolling horizontal so is it possible to have these horizontal instead so they are all side by size as far as possible?

Here is the html :

<div ng-repeat="r in rooms">
<div class="display:inline-block">
<div class="item item-icon" style="margin-bottom:10px !important;width:400px;">

<div><span class="icon ion-home"></span> <b>New Room</b></div>
<label class="item item-input">
<span class="input-label">Name</span><textarea placeholder="" ng-model="r.name"> </textarea>
</label>
<label class="item item-input">
<span class="input-label">Floor</span><textarea placeholder="Eg Ground Floor" ng-model="r.room"> </textarea>
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Description</span>
<textarea placeholder="yyy" rows="8" cols="10" ng-model="r.description">
</textarea>
</label>
<button class="button button-full button-dark" ng-click="startRoomProfileUpload(1,$index)">
Add An Image
</button>
<button class="button button-full button-dark" ng-click="removeRoom(r)">
Remove Room
</button>
<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" ng-click="removeImage(r.selectedImageUri)" style="width:100%;">Delete</button></div>
</div>
</div>
</span>
</div>
</div>
</div>
</div>

Answer

Give float:left to your <div ng-repeat="r in rooms"> and it should work.

Comments