Question

这与ng-select - Change height处的问题有关。我想做完全相同的事情，但是要使用ng-select来选择多个项目。

这是我的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;
        }
  `],
})

我能够通过使用

与非多重选择框一起使用

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

但是在启用倍数的情况下将其从.ng-select.ng-select-single更改为.ng-select.ng-select-multiple对高度没有影响。

这是CSS之后我的选择的样子：

我需要缩小它。

更新

在开发工具中，我可以按以下方式在.ng-select .ng-select-container中更改最小高度：

我的选择框会变小：

但是，在我的组件样式中添加相同的样式并不能解决这个问题：

@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，这是正确的，但您尚未覆盖它的子元素。

与选择元素相比，多个选择复选框具有其他元素（取消选择按钮，查看选定的选择等）

这些在

中

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

ng值div包含mendoza和Franklin元素：

您需要调整这些子元素中定义的高度/线高/边距/填充。

编辑：

在父元素减小尺寸之前，还需要使子元素变小。例如。在GIF中：

ng-选择多个-更改高度

1 个答案: