'Bootstrap selectpicker in dialog issue

I'm using a selectpicker in a dialog (Bootstrap 5.1.3), and I'm facing some issues.

Here's my code:

<select id="SelectSth" asp-for="SthId" data-width="300px" asp-items='@new SelectList(Model.Sth.OrderBy(x => x.Name),"Id", "Name")' data-live-search="true" data-container="body" class="selectpicker form-control">

When the dialog is shown, in javascript:

$(".selectpicker").selectpicker('refresh');

The list is not moving when I move the dialog (or should it close instead?). Also when I hit a button to close the dialog, the list is not closing.

When I remove the 'data-container="body"' property, the list is moving with the dialog (and closes when a button is hit), but appears with a scrollbar.

What I want is that the list moves with the dialog (or closes), and the list appears without scrollbars, and closes when I hit a button.

Does anyone have an idea how I can solve this? Thanks in advance!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source