Question

我将ng-select库https://github.com/ng-select/用于版本1.4.2的Angular 5。我想对其进行自定义，以便ng-select的高度较小。如何做到这一点？我曾经在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个地方，但没有效果。我能够成功更改字体大小。

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

我需要缩小它。

Answer 1

通过CSS覆盖样式：

{
    "metadata": { "value": "JABC" },
    "force": false,
    "users": [ 
        { "id": "111", "comment": "abc" },
        { "id": "222", "comment": "abc" },
        { "id": "333" }
    ]
}

Answer 2

使用这个：

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

ng-select-更改高度

2 个答案: