of-select倍数 - 改变高度

Question

这与的问题有关。我想做完全相同的事情，但使用 ng-select 可以 selected 多个项目。

这是我的 ng-select:

代码

<label class="col-sm-4 text-sm-right col-form-label">Payout Format</label>
                <div class="col-sm-8">
                    <ng-select
                        [items]="payoutFormats"
                        [multiple]="true"
                        [closeOnSelect]="true"
                        [searchable]="true"
                        bindValue="payoutBatchFormatID"
                        bindLabel="name"
                        placeholder="All"
                        [(ngModel)]="filter.payoutFormats"
                        name="payoutFormats">
                    </ng-select>
                </div>

在我的组件中，我添加了以下样式：

@Component({
    templateUrl: './test.component.html',
    styles: [`
        .ng-select{
            font-size:0.85em;
        }

        .ng-select .ng-select-container {
            min-height: 3px;
        }

        .ng-select.ng-select-multiple .ng-select-container {
            height: 3px;
        }
  `],
})

我能够通过使用

来使用非多个 select 框

.ng-select.ng-select-single .ng-select-container {
  height: 20px;
}

但是在启用多个时将其从 .ng-select.ng-select-single 更改为 .ng-select.ng-select-multiple 对身高。

这是 select 在 CSS 之后的样子：

我需要它更小。

更新

在开发工具中，我可以更改 .ng-select .ng-select-container 中的最小高度，如下所示：

我的 select 框显得更小：

然而，将相同的样式添加到我的组件样式中并没有解决这个问题：

@Component({
    templateUrl: './list-exceptions-handling-payments.component.html',
    styles: [`
        .ng-select{
            font-size:0.85em;
        }

        .ng-select .ng-select-container{
            min-height: 3px;
        }


        .ng-select.ng-select-multiple .ng-select-container {
            height: 3px;
        }

  `],
})

Answer 1

您覆盖了 .ng-select-container 和 .ng-select-multiple，这是正确的，但您没有覆盖它的子元素。

与 select 元素相比，多个 select 复选框具有额外的元素（deselect 按钮、视图 selected 选择等）

这些在

<div class="ng-value-container">
    <div class="ng-value>
    ....

ng-value div 包含 mendoza 和 franklin 元素：

您需要调整这些子元素中定义的height/line-height/margin/padding。

编辑：

您还需要先缩小子元素，然后父元素才会变小。例如。在 GIF 中：

of-select倍数 - 改变高度

ng-select multiple - Change height

css

angular-ngselect

angular