ng-select 组件在输入框和项目之间有间隙答案

【问题标题】：ng-select component has a gap between input box and itemsng-select 组件在输入框和项目之间有间隙
【发布时间】：2019-12-11 14:04:57
【问题描述】：

我有一个使用 @ng-select 库的应用程序。我还使用了一个在调用时会扩展的组件。如果我展开下拉列表一切正常，但如果我的其他组件中有一些项目，我的下拉列表有一个与其他组件的高度相对应的间隙。我正在使用 css 网格将 2 水平对齐，如下所示。 Here 是一个堆栈闪电战。单击下拉列表中的“新建查询”，然后单击“规则”以添加规则。有什么想法吗？

HTML

<div class="quick-filters form-inline">
  <ng-select style="width: 100%;" appearance="outline" [searchable]="false" [(ngModel)]="filterType" groupBy="group"
    (change)="onFilterTypeSelect($event)" [items]="filterTypes" bindLabel="name">
  </ng-select>
  <div *ngIf="showQuickQuery" class="input-add-on">
    <query-builder class="input-add-on-field" [formControl]='queryCtrl' [config]='queryConfig' [allowRuleset]="false">
      <ng-container
        *queryButtonGroup="let ruleset=addRuleSet; let addRule=addRule; let addRuleSet=addRuleSet; let removeRuleSet=removeRuleSet">
        <div class="btn-toolbar">
          <button type="button" class="btn btn-default" [disabled]="ruleset.rules == 0" (click)="onSaveFilter()"><i
              class="fa fa-floppy-o" style="color: #00BFFF;"></i> Save</button>
          <button type="button" class="btn btn-default" (click)="addRule()"><i class="fa fa-plus"></i> Rule</button>
          <button type="button" class="btn btn-default" [disabled]="ruleset.rules == 0" (click)="onValueSelect()"><i
              class="fa fa-play" style="color: #32CD32;"></i> Apply</button>
        </div>
      </ng-container>
      <ng-container *queryInput="let rule; type: 'date-range'">
        <input type="text" class="form-control" [(ngModel)]="rule.value" placement="bottom right" bsDaterangepicker
          [bsConfig]="bsConfig" />
      </ng-container>
    </query-builder>
  </div>
</div>

CSS

  .quick-filters {
    display: grid;
    grid-template-columns: 0.25fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 
    ". .";
    grid-gap: 2px;
  }
  .input-add-on {
    display: flex;
  }

  .input-add-on-field {
    flex: 1;
  }

【问题讨论】：

在此使用 stackblitz 会很有用。使其易于调试。
我认为这与定位有关。尝试将 ng-select 放在具有position:relative 的 div 中。看看情况如何。正如@MaihanNijat 提到的，如果您创建一个最小的可重现示例，我们会更容易修复它
@MaihanNijat 我编辑并添加了一个堆栈闪电战。

标签： html css angular css-grid angular-ngselect

【解决方案1】：

使用position:relative 添加一个div 解决了这个问题。感谢 cmets 的帮助。 Here 是更新的 stackblitz。我留下原件来看看问题。

【讨论】：