bit-drp-itx - long text dont show in dropdown menu

[jorge-teixeira]

Is there an existing issue for this?

• [X] I have searched the existing issues

Describe the bug

I was using the DROPDOWN component as an example, and ran into an issue when long text is used within it. The full text is not visible in the component, and it does not wrap onto a second line when needed. I tried to make the text wrap onto two lines if the text is too long to fit, but was unable to get that working properly. See the attached image showing how the long text gets cut off instead of wrapping. I would like help figuring out how to make the DROPDOWN component wrap long text onto a second line when needed.

Expected Behavior

long text break to second line

Steps To Reproduce

No response

Exceptions (if any)

No response

.NET Version

7.0.307

Anything else?

[msynk]

@jorge-teixeira Thanks for contacting us.

To resolve your issue with the BitDropdown you have a few solutions. The simplest one is using the Styles or Classes parameter and assigning specific CSS for the ItemButton like this:

<BitDropdown ... Styles="@(new() { ItemButton = "white-space: break-spaces;" })" ... />

Note: remember you might also need to change the height of the ItemButton.

If changing the CSS styles of all of the ItemButtons is not suitable, you can also try assigning the Class property of that specific item (for example a BitDropdownItem) together with assigning a specific class to ItemButton and use that selector to specifically select that long item. something like this:

var items = new List<BitDropdownItem<string>> { ..., new { Text="LONG TEXT", Class="long-text-item", ... }, ... };

<BitDropdown Items="items" Classes="@(new() { ItemButton="item-btn" })" ... />

.long-text-item .item-btn {
    white-space: break-spaces;   
    height: 50px;
}

[msynk]

One important thing: Using the internal CSS classes (like that bit-drp-itx) to override the styles is not recommended. These are internal parts of the components and are heavily subject to change in the future. It's better to just use the documented features of the component.