Issue
I have some products that i want to display side by side like this.
This hard coded code works fine.
<div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
But when i am trying to achieve same thing with angularJS loop.
<div ng-repeat="product in Products">
<div class="box">
//i will fill the details here.
</div>
</div>
I got this result.
This is my CSS class.
.box {
padding : 5px;
display : inline-block;
min-width: 100px;
min-height: 50px;
background-color: red;
}
What changes i need to do so the products can display side by side and in next row if screen width is full.
Solution
FIXING ORIGINAL PROBLEM
Your ng-repeat
should be on <div class="box">
<div>
<div ng-repeat="product in Products" class="box">
//i will fill the details here.
</div>
</div>
DESCRIPTION OF WHAT YOU WERE DOING WRONG
By doing this you are creating repeating a new <div class="box">
for each product in Products
.
The way you were doing it before meant you were creating a new container element for each product in Products
.
A simple and easy error to make.
FIXING YOUR CSS STYLING
To achieve the style you showed in your OP, you will want to add a margin to your repeated elements to add some spacing between them. To do so change:
.box {
padding : 5px;
display : inline-block;
min-width: 100px;
min-height: 50px;
background-color: red;
}
to
.box {
margin-right : 5px;
display : inline-block;
min-width: 100px;
min-height: 50px;
background-color: red;
}
Answered By - Alan Dunning
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.