Closed

Selection box for Blazorise-Autocomplete takes up the full browser page #6488

karl.ettinger@energieag.at created one year ago

ABP Framework version: v8.0.1
UI Type: Blazor Server
Database System: EF Core (SQL Server, Oracle, MySQL, PostgreSQL, etc..) / SQL Server
Tiered (for MVC) or Auth Server Separated (for Angular): no
Exception message and full stack trace: -
Steps to reproduce the issue:

Please download the sample project: https://powershare.energieag.at/s/BB9MiHWAX5PASPa (Please contact me for the password)

In the example project Enter a country in the Book Store/Authors/New author menu in the example project (e.g. Deutschland)

Sourcecode: Acme.BookStore.Blazor/Pages/Authors.razor

By the way, does not work with either

5 Answer(s)

0

maliming created one year ago
Support Team Fullstack Developer

hi

Please share the password, liming.ma@volosoft.com

Thanks.

maliming created one year ago

Support Team Fullstack Developer

Add below styles to your blazor-global-styles.css

.dropdown > div.dropdown-menu {
  position: fixed !important;
}

.dropdown.b-is-autocomplete > div.dropdown-menu {
  position: absolute !important;
}

0

karl.ettinger@energieag.at created one year ago

Thanks the autocomplete selection box works now.

But if a country is entered that is not in the list, the content of <NotFoundContent> is not displayed.

maliming created one year ago

Support Team Fullstack Developer

Please use FreeTypingNotFoundTemplate.

<Field>
    <FieldLabel>
        Countries
    </FieldLabel>
    <Autocomplete
        TItem="string"
        TValue="string"
        Data="@Countries"
        TextField="@( ( item ) => item)"
        ValueField="@( ( item ) => item)"
        @bind-SelectedValue="@SelectedSearchValue"
        @bind-SelectedText="@SelectedAutoCompleteText"
        Placeholder="Search..."
        Filter="AutocompleteFilter.StartsWith"
        FreeTyping>
        <FreeTypingNotFoundTemplate>
            Sorry... @context was not found! : (
        </FreeTypingNotFoundTemplate>
    </Autocomplete>
</Field>