CODEWITHSUNDEEP
blazorblazorise
core114
core114

Reputation: 5335

Blazorise Select component List long text issue

I'm beginner to Blazorise and I used the Select component, so when I using the long text in for select list, the select list not showing correctly , please look at the attached image. any solution for this to wrap the long text select option?

image description here

enter image description here

Code here

<Field ColumnSize="ColumnSize.Is4.OnTablet.Is12.OnMobile.Is12.OnDesktop.Is4.OnWidescreen.Is4.OnFullHD">
<Select TValue="int">
    <SelectItem Value="1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
    <SelectItem Value="2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
    <SelectItem Value="3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
    <SelectItem Value="4">Lorem Ipsum is simply dummy text of the printing and tLorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</SelectItem>
</Select></Field>

Upvotes: 0

Views: 670

Answers (1)

Dimitris Maragkos
Dimitris Maragkos

Reputation: 11392

To my knowledge browsers ignore styles for <option> tag so CSS like following won't work.

option {  
    max-width: 100%;
    overflow: hidden;
    word-wrap: normal !important;
    white-space: normal; 
}

As a workaround I suggest to use the Dropdown component instead. Here is an example:

<Field ColumnSize="ColumnSize.Is4.OnTablet.Is12.OnMobile.Is12.OnDesktop.Is4.OnWidescreen.Is4.OnFullHD">
    <Dropdown>
        <DropdownToggle Color="Color.Light" Width="Width.Is100">
            @(_selectedValue.HasValue ? _selectedValue : "Select item")
        </DropdownToggle>
        <DropdownMenu Style="max-width: 100%;">
            <DropdownItem Value="1" Class="text-truncate" Clicked="() => OnItemClicked(1)">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </DropdownItem>

            <DropdownDivider />

            <DropdownItem Value="2" Class="text-truncate" Clicked="() => OnItemClicked(2)">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </DropdownItem>

            <DropdownDivider />

            <DropdownItem Value="3" Class="text-truncate" Clicked="() => OnItemClicked(3)">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </DropdownItem>

            <DropdownDivider />

            <DropdownItem Value="4" Class="text-truncate" Clicked="() => OnItemClicked(4)">
                Lorem Ipsum is simply dummy text of the printing and tLorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.
            </DropdownItem>
        </DropdownMenu>
    </Dropdown>
</Field>

@code {
    private int? _selectedValue;

    private void OnItemClicked(int value)
    {
        _selectedValue = value;
    }
}

Result:

Dropdown

Upvotes: 1

Related Questions