Hi jose KJ,
Greetings from Syncfusion support!
Thank you for reaching out to us regarding the issue with full text visibility after selection in the SfDropDownList.
To address this, we recommend using tooltip support to display the entire text when the selected item is too large to fit within the input field. Below is a sample implementation that demonstrates how to achieve this:
@using Syncfusion.Blazor.DropDowns;
@using Syncfusion.Blazor.Popups;
<SfTooltip @ref="TooltipObj" ID="Tooltip" Target=".e-input-value .name[title]">
</SfTooltip>
<SfDropDownList TItem="GameFields" TValue="string" Placeholder="Select a game" DataSource="@Games">
<DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
<DropDownListTemplates TItem="GameFields">
<ValueTemplate>
<div class="name" title="@((context as GameFields).Text)">@((context as GameFields).Text)</div>
</ValueTemplate>
</DropDownListTemplates>
<DropDownListEvents TValue="string" TItem="GameFields" Opened="OnOpen" OnClose="OnClose"></DropDownListEvents>
</SfDropDownList>
@code{
SfTooltip TooltipObj;
public Boolean isOpen { get; set; } = false;
public class GameFields
{
public string ID { get; set; }
public string Text { get; set; }
}
private List<GameFields> Games = new List<GameFields>() {
new GameFields(){ ID= "Game1", Text= "American Football American Football" },
new GameFields(){ ID= "Game2", Text= "Badminton Badminton" },
new GameFields(){ ID= "Game3", Text= "Basketball Basketball " },
new GameFields(){ ID= "Game4", Text= "Cricket Cricket" },
new GameFields(){ ID= "Game5", Text= "Football" },
new GameFields(){ ID= "Game6", Text= "Golf" },
new GameFields(){ ID= "Game7", Text= "Hockey" },
new GameFields(){ ID= "Game8", Text= "Rugby"},
new GameFields(){ ID= "Game9", Text= "Snooker" },
new GameFields(){ ID= "Game10", Text= "Tennis"},
};
public void OnOpen(PopupEventArgs args)
{
isOpen = true;
}
public void OnClose(PopupEventArgs args)
{
//args.Cancel=true;
TooltipObj.CloseAsync();
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (isOpen)
{
await TooltipObj.RefreshAsync();
}
}
}
|
In this example, a tooltip will appear when hovering over the selected item in the dropdown, showing the full text. This approach ensures that long text is visible without requiring any style overrides or text wrapping in the input field.
Sample: https://blazorplayground.syncfusion.com/embed/VNVfZlBXShQqELlc?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5
For more detailed information, please refer to the documentation here.
Let us know if you need any further assistance!
