When I limit the width and height of the body, the Autocomplete popup does not seem to take those limitations into account and sometimes appears very far to the right, causing misalignment with the input field.
Based on my reading of the code, I understand that the position of the Autocomplete popup is calculated dynamically. However, it appears that the calculations do not consider the limited width and height of the body, resulting in the misalignment issue.
I would like some support to do any of the following things. Other suggestions are welcome.
- Adjust the CSS by applying custom styles to the Autocomplete popup in order to control its positioning. However, I'm afraid that the dynamic calculation of the popup's position might be overriding the applied styles.
- Find any specific properties or events related to the positioning of the popup that would allow me to override the default behavior.
Below are the details that may assist you in troubleshooting:
- Radzen version: 4.11.1
- Relevant code/configuration:
<div class="rz-p-0 rz-text-align-left searchartikel-autocomplete">
<RadzenAutoComplete TValue="string"
Data="@_Artikels"
TextProperty="Display"
@bind-value="@_SelectedArtikel"
Placeholder="Artikel..."
FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
Style="width:100%;max-width:25rem;padding:0;height:auto"
/>
</div>
> body {
> font-family: 'Roboto', sans-serif;
> font-size: 10px;
> ;
> color: var(--b040-color3);
> height: 820px;
> max-height: 820px;
> width: 1024px%;
> max-width: 1024px;
> margin: 0 auto;
> background-color: var(--b040-color3);
> display: flex;
> flex-direction: column;
> justify-content: center;
> align-items: center;
> padding: 0;
> position: relative;
> }
> .> searchartikel-autocomplete{
> position: relative;
> width:100%;
> background-color:white;
> }
- Please let me know if I need to add reproduceable code.
Any insights, suggestions, or guidance you can provide would be greatly appreciated, especially regarding the dynamic calculation of the popup's position.