I have an interesting problem. I am dynamically creating Bootstrap cards in my .Net 5.0 app using razor syntax on the UI.
Every 5th card a new row is created, so I have 4 cards visible aligned horizontally to the user.
On most screen sizes this works fine. There are 4 cards, or on smaller screens there is 1 or 2 cards visible aligned horizontally.
The problem is the medium screen, when its too small for 4 cards in a row, but too big to drop down to 2 cards per row. This results in 3 cards visible aligned horizontally to the user, and the 4th drops below them. They are all still inside the same 'row' element.
I can't see how to fix this with class properties, because the rows are created and populated with 4 cards dynamically. I also can't see how to fix it in code, because my razor function does not know what screen size the elements are being generated for? Any advice is much appreciated...
cshtml code:
<body class="body-bg-img">
<!-- This function checks if the card iteration is divisible by 4 to move to the next row -->
@{
bool check(int i)
{
var iAsString = i.ToString();
int iLength = iAsString.Length;
if ((iLength == 1 && ((iAsString[0] - '0') % 4 == 0)) || iLength == 0)
{
return true;
}
else if (iLength > 1)
{
int last = iAsString[iLength - 1] - '0';
int secondLast = iAsString[iLength - 2] - '0';
if ((secondLast * 10 + last) % 4 == 0)
{
return true;
}
else
{
return false;
}
}
else
{
return false;
}
}
}
<!-- This function creates a row and populates the first card, the nested loop then populates 3
more cards on the same row before breaking out to the main loop again, which creates the next row.
The nested loop then populates the next row etc. NOTE: I have [snipped] out some code for posting
to make it easier to read. -->
@for (int i = 0; i < Model.MainArticleList.Count(); i++)
{
var item = Model.MainArticleList[i];
if (check(i))
{
<div class="container-body">
<div class="row align-content-center justify-content-center">
<!-- CREATE A NEW CONTAINER WITH ROW & ADD FIRST CARD IN ROW -->
@if (item.UserIdRef != "none")
{
[snip]
@if (item.RazorRef != "none")
{
<div class="card h-35 border-success m-2" style="max-width: 18rem;">
[snip] <!-- Bootstrap card properties are being populated here -->
</div>
}
else if (item.HREFRef != "none")
{
<div class="card h-35 border-success m-2" style="max-width: 18rem;">
[snip] <!-- Just a different card content type -->
</div>
}
}
@for (int j = i + 1; j < Model.MainArticleList.Count(); j++)
{
<!-- CREATE CARDS 2, 3 and 4 INSIDE THE EXISTING ROW -->
var item1 = Model.MainArticleList[j];
if (!check(j))
{
@if (item1.UserIdRef != "none")
{
[snip]
@if (item1.RazorRef != "none")
{
<div class="card h-35 border-success m-2" style="max-width: 18rem;">
[snip] <!-- Bootstrap card properties are being populated here -->
</div>
}
else if (item1.HREFRef != "none")
{
<div class="card h-35 border-success m-2" style="max-width: 18rem;">
[snip] <!-- Just a different card content type -->
</div>
}
}
}
else
{
break;
}
}
</div>
</div>
}
}
<br />
</body>