Layout problem on components
Hi!
I'm just starting using Syncfusion for Blazor Wasm. I'm having problems in showing components in the right way. Do you see anything I'm doing wrong?
Thanks!
-------------
Microsoft Visual Studio Community 2022 (64 bit) - Versione 17.7.0 Preview 1.0
.Net 7.0
Syncfusion Blazor 21.2.6
-------------
In index.html:
<link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<link rel='nofollow' href="_content/Syncfusion.Blazor/styles/fabric.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript">
-------------
In Test.razor
@page "/test"
<div class="col-lg-12 control-section">
<div id="listbox-control">
<h4>Select your favorite car:</h4>
<SfListBox Value=@value DataSource="@vehicleData" TValue="string[]" TItem="ListItem">
<ListBoxFieldSettings Text="Text" Value="Id"></ListBoxFieldSettings>
</SfListBox>
<SfDropDownList TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData">
<DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
</SfDropDownList>
</div>
</div>
<SfDropDownButton Content="Edit">
<DropDownMenuItems>
<DropDownMenuItem Text="Cut"></DropDownMenuItem>
<DropDownMenuItem Text="Copy"></DropDownMenuItem>
<DropDownMenuItem Text="Paste"></DropDownMenuItem>
</DropDownMenuItems>
</SfDropDownButton>
@code
{
private string[] value = new string[] { "List-01" };
private List<ListItem> vehicleData = new List<ListItem>
{
new ListItem { Text = "Hennessey Venom", Id = "List-01" },
new ListItem { Text = "Bugatti Chiron", Id = "List-02" },
new ListItem { Text = "Bugatti Veyron Super Sport", Id = "List-03" },
new ListItem { Text = "SSC Ultimate Aero", Id = "List-04" },
new ListItem { Text = "Koenigsegg CCR", Id = "List-05" },
new ListItem { Text = "McLaren F1", Id = "List-06" },
new ListItem { Text = "Aston Martin One-77", Id = "List-07" },
new ListItem { Text = "Jaguar XJ220", Id = "List-08" },
new ListItem { Text = "McLaren P1", Id = "List-09" },
new ListItem { Text = "Ferrari LaFerrari", Id = "List-10" }
};
public class ListItem
{
public string Text { get; set; }
public string Id { get; set; }
}
public class Games
{
public string ID { get; set; }
public string Text { get; set; }
}
List<Games> LocalData = new List<Games> {
new Games() { ID= "Game1", Text= "American Football" },
new Games() { ID= "Game2", Text= "Badminton" },
new Games() { ID= "Game3", Text= "Basketball" },
new Games() { ID= "Game4", Text= "Cricket" },
new Games() { ID= "Game5", Text= "Football" },
new Games() { ID= "Game6", Text= "Golf" },
new Games() { ID= "Game7", Text= "Hockey" },
new Games() { ID= "Game8", Text= "Rugby"},
new Games() { ID= "Game9", Text= "Snooker" },
new Games() { ID= "Game10", Text= "Tennis"},
};
}
<style>
#listbox-control {
width: 350px;
margin: auto;
}
@@media screen and (max-width: 590px) {
#listbox-control {
width: 100%;
}
}
</style>
-------------
The result:
