Currently, my display looks like this.
The add to cart button is not showing up in a row because the product name of the third element is a bit lengthy.
This is the code used to display the products:
<div>
<div class='box' ng-repeat="product in ProductService.Products | filter:{'SubCategoryID': SCId.toString()}:true | orderBy:'ProductName'">
<br> <b>{{product.BrandName}}</b>
<br> {{product.ProductName}}
<br><br> <img src="http://localhost/{{ product.ProductImagePath }}" alt="" border=3 height=75 width=75></img>
<br><br> <select class="form-control btn btn-default btn-xs" ng-init="SelectedVariant = product.Variants[0]" ng-model="SelectedVariant" ng-options="variant.VariantName for variant in product.Variants" ng-change="ChangeVariant(product.ProductID, SelectedVariant.VariantID)"></select>
<br> <strike> {{SelectedVariant.MRP}} </strike> {{SelectedVariant.SellPrice}} {{SelectedVariant.InCart}}
<br><br>
<div ng-if="SelectedVariant.InCart==0">
<a class="btn btn-success btn-md" ng-click="AddToCart(product.ProductID, SelectedVariant.VariantID)">Add to Cart
<span class="glyphicon glyphicon-plus"></span>
</a>
</div>
<div ng-if="SelectedVariant.InCart>0">
<a class="btn btn-default btn-xs" ng-click="PlusItem(product.ProductID, SelectedVariant.VariantID)">
<span class="glyphicon glyphicon-plus"></span>
</a>
<button type="button" class="btn btn-info disabled">{{SelectedVariant.InCart}} in cart</button>
<a class="btn btn-default btn-xs" ng-click="MinusItem(product.ProductID, SelectedVariant.VariantID)">
<span class="glyphicon glyphicon-minus"></span>
</a>
</div>
</div>
</div>
Here is the CSS style for the box:
.box {
margin : 5px;
display : inline-block;
width: 150px;
height: 300px;
background-color: #F5FBEF;
text-align:center;
vertical-align: top;
}
I need assistance in aligning all the elements in the box so that the add to cart buttons start on the same row. Currently, some are causing layout issues due to varying lengths of product names.