How to increase dropdownlist item width in a Toolbar

[Rolando Tonin]

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>

[Alagumeena Kalaiselvan]

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. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Toolbar-1078804083  

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

Regards 

Alagumeena.K  

[Rolando Tonin]

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    

[Alagumeena Kalaiselvan]

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