Set width of valuetemplate in dropdown list

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


2 Replies

BC Berly Christopher Syncfusion Team June 23, 2021 08:31 AM UTC

Hi Michael, 
  
Greetings from Syncfusion support. 
  
We would like to inform you that if we configure the popupWidth as auto, then popup will be displayed based on item length. So, we suggest you to configure width property alone this will leads to popup will be displayed based on input’s width. Kindly refer the below code snippet. 
  
<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> 
 
  
  
  
Regards, 
Berly B.C 



MA Michael Aston June 23, 2021 08:44 AM UTC

Thanks that fixed it.


Loader.
Up arrow icon