Hello. I’ve just started using Radzen in a Blazor web app. I’m using Visual Studio 2022. I’m trying to create a page that has a list of inventory items using DataList and Card. I’ve got it working but each card has a lot of white space around it, almost like it is within another card. Most likely it is user error, but I’ve spent a lot of time on it and can’t figure it out. I would like to remove that white space so that the cards are next to each other with a small gap. Attached is screen sample and the code. Thanks.
For some reason when I try to add the RadzenDataList it doesn’t insert the text
<Template Context="InventoryItem">
<RadzenCard Variant="Variant.Filled" class="rz-p-0" Style="width:auto; margin:1rem; background-color:aliceblue; height:100px; width:400px">
<RadzenStack Orientation="Orientation.Horizontal" Gap="4" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.Left">
<RadzenColumn>
<RadzenImage Path="@InventoryItem.ImagePath" )"
AlternateText=""
class="rz-border-radius-2"
Style="width: 80px; height: 80px;">
</RadzenImage>
</RadzenColumn>
<RadzenStack Orientation="Orientation.Vertical" Gap="2">
<RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Center">
<RadzenText TextStyle="TextStyle.Body1"><b>@InventoryItem.ItemName</b></RadzenText>
<RadzenText TextStyle="TextStyle.Body1"><b>@InventoryItem.Location</b></RadzenText>
</RadzenStack>
<RadzenText style="white-space:normal; word-wrap:break-word; font-size:12px; padding:unset">@InventoryItem.Description</RadzenText>
</RadzenStack>
</RadzenStack>
</RadzenCard>
</Template@code
@code{
public List<InventoryItemTest> inventoryItems = new List<InventoryItemTest>();
public void LoadData()
{
inventoryItems.Add(new InventoryItemTest("favicon.png", "TV", "Living Room", "Sony 52 inch television"));
inventoryItems.Add(new InventoryItemTest("favicon.png", "DVD Player", "Living Room", "RCA DVD and CD Player and Recorder"));
inventoryItems.Add(new InventoryItemTest("favicon.png", "TV", "Bed Room", "Samsung 32 inch television"));
inventoryItems.Add(new InventoryItemTest("favicon.png", "Ice Water Dispenser", "Kitchen", "Brand new water dispenser with both hot and cold water"));
}
}
public class InventoryItemTest
{
public InventoryItemTest() : this("", "", "", "")
{
this.ImagePath = string.Empty;
this.ItemName = string.Empty;
this.Location = string.Empty;
this.Description = string.Empty;
}
public InventoryItemTest(string imagePath, string itemName, string location, string description)
{
this.ImagePath = imagePath;
this.ItemName = itemName;
this.Location = location;
this.Description = description;
}
public string ImagePath { get; set; } = string.Empty;
public string ItemName { get; set; } = string.Empty;
public string Location { get; set; } = string.Empty;
public string Description { get; set; } = string.Empty;
}
