ng-select-更改高度 [英] ng-select - Change height

问题描述

我正在使用ng-select库 https://github.com/ng-select/适用于Angular 5(1.4.2版).我想对其进行自定义，以便ng-select的高度较小.如何做到这一点?我在 https://github.com/上使用样式进行自定义ng-select/ng-select#custom-styles ，但无法使其正常工作.

I am using the ng-select library 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 but cannot get it to work.

我添加了一个定制的CCS，试图做到这一点.

I have added a customized CCS with an attempt to do this.

这是我的ng-select代码

Here is my code of the 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:

Here is the CSS I have added to customize it:

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

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

可以看出，我尝试将高度设置为2个位置，但没有任何效果.我能够成功更改字体大小.

As can be seen, I have tried setting the height in 2 places but it has no effect. I was able to change the font size successfully.

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

Here is how my select looks like after the CSS:

我需要缩小它.

推荐答案

通过CSS覆盖样式:

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

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

这篇关于ng-select-更改高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！