时间戳

首页 > 解决方案 > Bootstrap下拉高度不随数据变化而更新 - Angular

html - Bootstrap下拉高度不随数据变化而更新 - Angular

问题描述

很抱歉，我要重新发布此问题，但由于缺少最少的可重现代码，我之前的问题被标记为已关闭。我已经附上了一个stackblitz链接。

原始问题 - Bootstrap 搜索选择下拉列表，但现在当我尝试搜索列表并且下拉列表在顶部打开时，列表会缩小并漂浮在半空中

请不要关闭这个。这对我的项目非常重要，我已经坚持了 16 个小时。

我在 Angular 8 项目中使用引导下拉菜单创建了一个自定义搜索选择下拉菜单。该功能完美运行，但问题在于下拉菜单在元素顶部打开时。现在，当我使用搜索框进行搜索时，列表会相应地更新并缩短，但它会一直漂浮在半空中。您可以在下面的 GIF 中看到问题。

问题 GIF - https://imgur.com/a/SeMVjns

正如您在我搜索的第一种情况中看到的那样，列表被缩短并且漂浮在半空中。我想要的是当列表被缩短时，它仍然直接出现在专家下拉按钮的上方，中间没有任何空格。

下面是我的 HTML 代码：

<div class="dropdown h-100" [ngClass]="{'statusDropdownContainer': config.src != 'unavailability'}">
    <a class="btn btn-white dropdown-toggle mb-2 statusFilterDropdown h-100 w-100 flex-middle" [ngClass]="{'btnDisable': disable, 'srcUnavailability': config.src == 'unavailability' }" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="text-truncate">{{config.src != 'unavailability' ? config.dropdownTitle + ':' : ''}} {{selectedValue ? selectedValue : 'All'}}</span>
    </a>
    <div class="dropdown-menu w-100 pt-0" aria-labelledby="dropdownMenuButton">
        <input type="text" class="w-100 p-2 searchInput" [ngModel]="searchValue" (ngModelChange)="filterDropdown($event)" placeholder="{{config.placeholder}}">
        <a *ngFor="let option of filteredList; let i=index" class="dropdown-item pointer text-contain" [ngClass]="{'alternateBackground': i%2 == 0 }" (click)="selectValue(option.name, option.unique_code)">
            {{option.name}} 
        </a>
        <div *ngIf="filteredList.length <=0" class="text-center text-muted mt-1">No {{config.user}} found</div>
    </div>
</div>

我需要进行哪些 CSS 更改？

Stackblitz - https://stackblitz.com/edit/angular-ivy-nghkhp?file=src/app/app.component.html

编辑：我找到了导致问题的确切问题。Bootstrap 的下拉菜单使用 popperJS 来定位下拉菜单。PopperJS 在滚动事件上计算下拉菜单的位置，因此每当窗口滚动时，都会重新计算下拉菜单的尺寸（使用变换 CSS）。但在我的情况下，由于没有滚动，因此不会计算尺寸，并且下拉菜单的高度与用户在搜索框中搜索内容之前的高度相同。但我想要的是每次列表数据发生变化时重新计算维度。任何的意见都将会有帮助。谢谢。

标签： htmlcssangularbootstrap-4dropdown

解决方案

Bootstrap 的下拉菜单使用 popperJS 来定位下拉菜单。PopperJS 在滚动事件上计算下拉菜单的位置，因此每当窗口滚动时，都会重新计算下拉菜单的尺寸（使用变换 CSS）。

一种方法是让主体的高度略高于视口高度，然后以编程方式触发 ngModelChange 上的滚动

堆栈闪电解决方案

您可以添加到 CSS（如果不需要，您也可以隐藏垂直滚动条overflow-y: hidden;）

body {
   min-height: 101vh;
}

您可以在您的方法中添加向下滚动 1px 并向上滚动 1px以达到所需的效果。filterDropdown(e)ngModelChange

  filterDropdown(e) {
    console.log("e in filterDropdown -------> ", e);
    window.scrollTo(window.scrollX, window.scrollY + 1);
    let searchString = e.toLowerCase();
    if (!searchString) {
      this.filteredList = this.data.slice();
      return;
    } else {
      this.filteredList = this.data.filter(
        user => user.name.toLowerCase().indexOf(searchString) > -1
      );
    }
    window.scrollTo(window.scrollX, window.scrollY - 1);
    console.log("this.filteredList indropdown -------> ", this.filteredList);
  }

推荐阅读