Dropdown Misalignment During Page Scroll

Arkadiusz Idzikowski staff commented 2 months ago

Could you please provide an example code and more information about reproduction steps that would help us to recreate such a problem on our end? We checked both dropdown and select menus during scroll but we could not reproduce scenario where the menu is disconnected from the input/trigger.

Salman Ali pro premium commented 3 weeks ago

Issue: Dropdown Menu Not Repositioning with Scroll

Description:

We’re encountering a UI issue where the dropdown menu (both in mdbDropdown and mdb-select) does not stay aligned with its trigger element when the page is scrolled. This is particularly noticeable in scrollable containers or long pages. Instead of moving along with the trigger, when it reaches the top of the table dense menu, align itself to the right of the table instead of closing, leading to a misalignment between the toggle button and the dropdown options.

Example:https://usercontent.mdbootstrap.com/mdb-images/support/464fd8a1-4620-452a-8f05-b3b7ade40c51-dropdown.jpg

Code

 <div class="d-flex align-items-center justify-content-end">
                                    <div class="dropstart" mdbDropdown [withPush]="true">
                                        <a mdbBtn mdbDropdownToggle mdbRipple [floating]="true" size="sm"
                                            class="dropdown-toggle m-0 shadow-none">
                                            <mdb-icon fas icon="ellipsis-v" class="text-black"></mdb-icon>
                                        </a>
                                        <ul mdbDropdownMenu class="dropdown-menu shadow-sm">
                                            <li><a class="dropdown-item" (click)="onEdit(item)">{{'COMMON_EDIT' | translate }}</a></li>
                                            @if (roleDetail && roleDetail.delete) {
                                                <li><a class="dropdown-item" (click)="onDelete(item)">{{'COMMON_DELETE'| translate}}</a></li>
                                                }
                                        </ul>
                                    </div>
                                </div>

point 2 MDB dropdown options are not moving with the scroll

Example:https://usercontent.mdbootstrap.com/mdb-images/support/8e02155f-d530-4771-8f35-35081fd2f6c9-dropdown2.jpg

Code

   <mdb-form-control>
                <mdb-select [formControlName]="setting.attribute_name" [filter]="true"
                                                    [notFoundMsg]="'COMMON_NOT_FOUND' | translate"
                                          [clearButton]="shouldShowSelectIcons(setting.attribute_name)"
                                                    [ngClass]="{'validate-error': (isDetailSubmitted && _sharedService.hasError(detailsForm, setting.attribute_name, 'required'))}">
                                                    <mdb-option *ngFor="let option of setting.attribute_choices | sortAlphabetically:'key':true"
                                                        [value]="option.value">{{option.key |
                                                        translate}}
                                                    </mdb-option>
                                                </mdb-select>
                                                <label mdbLabel class="form-label">{{setting.attribute_name |
                                                    translate}}</label>
                                                @if(textFieldValue(setting.attribute_name) &&
                                                shouldShowSelectIcons(setting.attribute_name)) {
                                                <div class="input-icons">
                                                    <button type="button" mdbBtn mdbRipple [floating]="true"
                                                        size="sm">
                                                        <mdb-icon fas icon="eye"
                                                            (click)="showConnector(textFieldValue(setting.attribute_name))"></mdb-icon>
                                                    </button>
                                                </div>
                                                }
                                            </mdb-form-control>

Arkadiusz Idzikowski staff commented 2 weeks ago

We tested both components on our end but we could not find any bugs in the dropdown position updates.

Could you please edit your first post and provide a full HTML/TS code on which we will be able to reproduce those problems? It seems like you use those components inside a table/container and we would need to better understand this use case to reproduce this bug on our end.