of-select - 改变高度

Question

我正在使用 ng-select 库 https://github.com/ng-select/ for Angular 5 at version 1.4.2. I want to customize it so the height of the ng-select is smaller. How can this be achieved? I have had a look at customizing with styles at https://github.com/ng-select/ng-select#custom-styles 但无法正常工作。

我已经添加了一个自定义的 CCS 并尝试这样做。

这是我的 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"
                        [closeOnSelect]="true"
                        [searchable]="true"
                        bindValue="payoutBatchFormatID"
                        bindLabel="name"
                        placeholder="All"
                        [(ngModel)]="filter.payoutFormats"
                        name="payoutFormat"
                        class="custom">
                    </ng-select>
                </div>

这是我添加的CSS自定义它：

.ng-select.custom {
    height:5px;
    font-size: 0.8em;
}

.ng-select.custom .ng-select-container  {
    height:5px;
}

可以看出，我试过在2个地方设置高度都没有效果。我能够成功更改字体大小。

这是我的 select 在 CSS 之后的样子：

我需要它更小。

Answer 1

通过 CSS 覆盖样式：

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

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

Answer 2

使用这个：

::ng-deep .ng-select-container {
  height: 5px !important;
  font-size: 0.8em!important;
}

Answer 3

在您的样式中添加：

::ng-deep .ng-select .ng-select-container , ::ng-deep .ng-select.ng-select-single .ng-select-container{
  min-height: 5px;
  font-size: 0.8em;
}

of-select - 改变高度

ng-select - Change height

angular-ngselect

angular