How to increase dropdownlist item width in a Toolbar

Hy
in below HTML code I need to increase dropdownlist width to avoid Item description to be clipped. I tried to cgange below width value on toolbariItem or SfDropDowList field but nothing changed. The width remain fixed on value that I don't know. Where am I doing wrong?

<SfToolbar OverflowMode="OverflowMode.Popup">
                        <ToolbarEvents Clicked="ToolbarClickHandler"></ToolbarEvents>
                        <ToolbarItems>
                            <ToolbarItem Type="ItemType.Input" Width="280px">
                                <Template>
                                    <SfDropDownList TValue="ItemBO" TItem="ItemBO" DataSource=@ItemList >
                                        <DropDownListFieldSettings Text="Description" Value="RowGuid"> </DropDownListFieldSettings>
                                        <DropDownListEvents TValue="Guid" ValueChange="OnChangeItems"> </DropDownListEvents>
                                    </SfDropDownList>
                                </Template>
                            </ToolbarItem>
                            <ToolbarItem Text="Add" TooltipText="Add a new Project Manager" PrefixIcon="e-add" Id="IDAddPM" />
                            <ToolbarItem @ref="Editbtn" Text="Modifica" TooltipText="Modifica i dati del Project Manager selezionato" PrefixIcon="e-edit" Id="IDEditPM" Disabled="@OnItemSelectedChanged()" />
                            <ToolbarItem @ref="Removebtn" Text="Remove" TooltipText="Remove Project Manager selected" PrefixIcon="e-delete" Id="IDRemovePM" Disabled="@OnItemSelectedChanged()" />
                        </ToolbarItems>
                    </SfToolbar>

3 Replies 1 reply marked as answer

AK Alagumeena Kalaiselvan Syncfusion Team June 9, 2020 05:05 AM UTC

Hi Rolando, 

Greetings from Syncfusion support! 

We have checked your reported query “How to increase dropdownlist item width in toolbar” and we suggest you to define the preferred width to DropdownList component instead of bind width to ToolbarItem. We have modified the shared code for your reference. 
<SfToolbar OverflowMode="OverflowMode.Popup"> 
    <ToolbarEvents Clicked="ToolbarClickHandler"></ToolbarEvents> 
    <ToolbarItems> 
        <ToolbarItem Type="ItemType.Input"> 
            <Template> 
                <SfDropDownList TValue="ItemBO" TItem="ItemBO" DataSource=@ItemList Width="280px"> 
                    <DropDownListFieldSettings Text="Description" Value="RowGuid"> </DropDownListFieldSettings> 
                </SfDropDownList> 
            </Template> 
        </ToolbarItem> 
        <ToolbarItem Text="Add" TooltipText="Add a new Project Manager" PrefixIcon="e-add" Id="IDAddPM" /> 
        <ToolbarItem Text="Modifica" TooltipText="Modifica i dati del Project Manager selezionato" PrefixIcon="e-edit" Id="IDEditPM" Disabled="@OnItemSelectedChanged()" /> 
        <ToolbarItem Text="Remove" TooltipText="Remove Project Manager selected" PrefixIcon="e-delete" Id="IDRemovePM" Disabled="@OnItemSelectedChanged()" /> 
    </ToolbarItems> 
</SfToolbar> 

Also, you can download above sample using the following link. 

Kindly try with shared solution and get back to us, if you need further assistance. 

Regards 
Alagumeena.K  


Marked as answer

RT Rolando Tonin June 9, 2020 06:48 AM UTC

Hi Alagumeena,

Now it work as expected. The issue comes if i forget "px" postfix in Width value. Indeed Width="280px" works but Width="280" don't work.

Thanks Rolando    


AK Alagumeena Kalaiselvan Syncfusion Team June 9, 2020 10:55 AM UTC

Hi Rolando, 

Thanks for your update. 

We have validated your reported case and the Width property must be specified either in “px” pixel value or as “%” percentage value. Numeric values are not supported in DropdownList component. so, kindly define width with postfix as “px” or “%“. 

Regards 
Alagumeena.K 


Loader.
Up arrow icon