Currently, I am working on creating a PDF view page for product labels using ASP.NET MVC in C#. The goal is to have two columns on the page, with 5 rows in each column, totaling to 10 labels per page. When specific products are selected in a form, the form should display a PDF view of the labels (using Rotativa) with the selected products inserted into the labels for printing. While I have managed to successfully populate the data into the labels, I'm facing an issue where the labels are displaying in a single column per page. What I want is for the labels to flow from one column to the next after reaching the end of a page, rather than starting a new page. I attempted to create another section and copied the fields from the first column, but it displayed duplicate records on each row. I've tried various solutions I found online, such as using display: block or display: inline-block, and setting column-count: 2; in CSS. However, none of these approaches have been successful. Most of the examples I came across online involve multiple fields or columns, but I only have one. It's puzzling that the labels repeat down the left half of the page but don't continue to the right half. The desired layout is as follows:
[ Label from Record 1 ] [ Label from Record 6 ]
[ Label from Record 2 ] [ Label from Record 7 ]
[ Label from Record 3 ] [ Label from Record 8 ]
[ Label from Record 4 ] [ Label from Record 9 ]
[ Label from Record 5 ] [ Label from Record 10]
(end of page 1)
I've been grappling with this issue for a couple of days now and any assistance would be greatly appreciated. Here is the code snippet I have so far:
<table>
@foreach (var item in Model)
{
<tr>
<td class="left-col">
<img src="@Server.MapPath("~/Images/" + item.Logo)" class="comp-logo"><br />
<label class="item-lbl">Item #</label><br />
<label class="code">@Html.DisplayFor(modelitem => item.Product_Code)</label><br />
<label class="descript">@Html.DisplayFor(modelitem => item.Description)</label>
</td>
</tr>
}
</table>