I'm try to set the width of the items in valuetemplate of the dropdownlist so that the items in the dropdown are the same width as the input. The setting of the widths on the div items is being ignored. Pretty sure this use to work.
<SfDropDownList Width="250px" [email protected] TValue=int? TItem=@DashBoardLite @bind-Value=@DashBoardId PopupWidth="Auto">
<DropDownListFieldSettings Value=@nameof(DashBoardLite.DashBoardId) Text=@nameof(DashBoardLite.Name) />
<DropDownListEvents OnValueSelect=@OnValueSelectDashBoardListAsync TValue=int? TItem=@DashBoardLite />
<DropDownListTemplates TItem=@DashBoardLite>
<!-- Templated to allow the inclusion of the shared icon -->
<ItemTemplate>
@{
var DashBoardObj = (context as DashBoardLite);
if (DashBoardObj != null)
{
if (DashBoardObj.AccessType == DashBoardAccess.Access.Shared)
{
<span class="vx-icon-share"></span>
<span>@DashBoardObj.Name</span>
}
else
{
<span style="padding-left:27px;">@DashBoardObj.Name</span>
}
}
}
</ItemTemplate>
<ValueTemplate>
@{
var DashBoardObj = (context as DashBoardLite);
if (DashBoardObj != null)
{
if (DashBoardObj.AccessType == DashBoardAccess.Access.Shared)
{
<div style="width: 220px; margin-top: 4px; margin-left: 8px; overflow-x:hidden; overflow-y:hidden">
<span class="vx-icon-share"></span>
<span>@DashBoardObj.Name</span>
</div>
}
else
{
<div style="width: 220px; margin-top: 5px; margin-left: 8px; overflow-x: hidden;">
@DashBoardObj.Name
</div>
}
}
}
</ValueTemplate>
</DropDownLis
<SfDropDownList Width="250px" DataSource=@DashBoardsLite TValue=int? TItem=@DashBoardLite @bind-Value=@DashBoardId >
<DropDownListFieldSettings Value=@nameof(DashBoardLite.DashBoardId) Text=@nameof(DashBoardLite.Name) />
<DropDownListEvents OnValueSelect=@OnValueSelectDashBoardListAsync TValue=int? TItem=@DashBoardLite />
<DropDownListTemplates TItem=@DashBoardLite>
<!-- Templated to allow the inclusion of the shared icon -->
<ItemTemplate>
@{
var DashBoardObj = (context as DashBoardLite);
if (DashBoardObj != null)
{
//if (DashBoardObj.AccessType == DashBoardAccess.Access.Shared)
//{
<span class="vx-icon-share"></span>
<span>@DashBoardObj.Name</span>
}
else
{
<span style="padding-left:27px;">@DashBoardObj.Name</span>
}
}
</ItemTemplate>
<ValueTemplate>
@{
var DashBoardObj = (context as DashBoardLite);
if (DashBoardObj != null)
{
//if (DashBoardObj.AccessType == DashBoardAccess.Access.Shared)
//{
<div style="width: 220px; margin-top: 4px; margin-left: 8px; overflow-x:hidden; overflow-y:hidden">
<span class="vx-icon-share"></span>
<span>@DashBoardObj.Name</span>
</div>
}
else
{
<div style="width: 220px; margin-top: 5px; margin-left: 8px; overflow-x: hidden;">
@DashBoardObj.Name
</div>
}
}
</ValueTemplate>
</DropDownListTemplates>
</SfDropDownList> |
Thanks that fixed it.