Question Background:
I have a simple page in my MVC app that renders a list of Panels.
The Issue:
The Panels include information about products I'm displaying including the products title and image. I have set the image to be a max size of 105px. If the title of the product is long it was break to a second line, inturn this means that it pushes the next line Of Panels down leaving gaps in the rows. Please see the following diagram for an explanation:
How do I set the markup so that the Panels are always the same height no matter the size of the image or title? I want to loose the gaps in the rows.
The MarkUp:
This is the following MarkUp I'm using. please note the foreach loop that creates the list of Panels:
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@model List<ShopComparisonEngine.Models.ViewResponseRoot>
<!DOCTYPE html>
<html>
<head>
<title>
Comparison Engine
</title>
</head>
<body>
<div class="container">
@foreach (var displayItem in (List<ShopComparisonEngine.Models.ViewResponseRoot>)Model)
{
foreach (var item in displayItem.DisplayItems)
{
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title text-center"><b>@item.Title</b></h3>
</div>
<div class="panel-body">
<a href="@item.url"><img src="@item.Image" class="picHeight img-rounded img-responsive center-block" /></a>
<h4 class="text-center">£@item.Price</h4>
<h4 class="text-center"><a href="@item.url" class="btn btn-success">See More</a></h4>
<h4 class="text-center">@item.Origin</h4>
</div>
</div>
</div>
}
}
</div>
