This is a migrated thread and some comments may be shown as answers.

Close button misplaced

1 Answer 88 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Ed
Top achievements
Rank 1
Iron
Veteran
Iron
Ed asked on 08 Dec 2020, 08:30 AM

Please see the attached image.

I don't have any idea what caused this. I can't figure out how this could have happened. Can someone show me how to add some css to move the 'X' over a bit?

Thanks ... Ed

 

1 Answer, 1 is accepted

Sort by
0
Nadezhda Tacheva
Telerik team
answered on 09 Dec 2020, 05:27 PM

Hello Ed,

In order to investigate further and clarify what is causing this appearance, we will need some more details or may be a code snippet showing your approach.

In the meantime, you can style the selected elements by cascading through their parent element - the MultiSelect component.

You can set a CSS class to the MultiSelect via its "Class" parameter. Then you will be able to style all the li tags in it (the li tags are holding the spans with the selected items). See the example below for reference:

 

<style>
    .MyMultiSelect li{
        width:auto;
    }
</style>

<TelerikMultiSelect Data="@Countries"
                    @bind-Value="@Values"
                    Placeholder="Enter Balkan country, e.g., Bulgaria"
                    Width="350px" ClearButton="true" AutoClose="false" Class="MyMultiSelect">
</TelerikMultiSelect>

@if (Values.Count > 0)
{
    <ul>
        @foreach (var item in Values)
        {
            <li>@item</li>
        }
    </ul>
}

@code {
    List<string> Countries { get; set; } = new List<string>();
    List<string> Values { get; set; } = new List<string>();

    protected override void OnInitialized()
    {
        Countries.Add("Albania");
        Countries.Add("Bosnia & Herzegovina");
        Countries.Add("Bulgaria");
        Countries.Add("Croatia");
        Countries.Add("Kosovo");
        Countries.Add("North Macedonia");
        Countries.Add("Montenegro");
        Countries.Add("Serbia");
        Countries.Add("Slovenia");

        base.OnInitialized();
    }
}

 

Regards,
Nadezhda
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
MultiSelect
Asked by
Ed
Top achievements
Rank 1
Iron
Veteran
Iron
Answers by
Nadezhda Tacheva
Telerik team
Share this question
or