combobox list items getting truncated when its longer text in small devices, how to allow text wrap

[jose KJ]

<SfComboBox @ref="@ComboObjCountry" TValue="string" Placeholder="Select a country" TItem="Country" DataSource="@countries" AllowCustom="true" AllowFiltering="true" @bind-Value=etlMetadata.CountryName>

    <ComboBoxFieldSettings Text="CountryName" Value="CountryName"></ComboBoxFieldSettings>

    <ComboBoxEvents TValue="string" Filtering="@OnFilteringCountry" TItem="Country" ValueChange="countryChanged" />

    <ComboBoxTemplates TItem="Country">

        <NoRecordsTemplate>

            <div>

                <div id="nodata">No matched item, would you like to add it to the list as a new item?</div>

                <SfButton id="btn" class="e-control e-btn custom-button" @onclick="@AddCountry">Add New Item</SfButton>

            </div>

        </NoRecordsTemplate>

    </ComboBoxTemplates>

</SfComboBox>
how to allow text wrap?, can we also make the dropdown as a popup if device size is small?
thanks

[Yohapuja Selvakumaran]

Hi Jose K J,

Thank you for reaching out to us.

We have reviewed your requirement and would like to inform you that the default behavior of the ComboBox component is to display the text with ellipsis if the list item exceeds the popup width.

If you would like to wrap the text instead, you can apply the following style to the list items:

 

    .e-dropdownbase .e-list-item{

       white-space: normal; /* Allow text to wrap */

       word-wrap: break-word; /* Break long words */

       overflow: hidden; /* Hide overflow text */

    }

 

 

For your reference, please find the sample below:

Sample:  https://blazorplayground.syncfusion.com/htryDMNhTUUGbeFa

Regards,

Yohapuja S

[jose KJ]

thanks it worked

[Kalpana Ganesan]

Hi Jose,

You are welcome. Please get back to us for further assistance.

Regards,

Kalpana.