По умолчанию ширина выпадающего списка равна ширине поля и увеличивается, когда в списке появляется длинный текст. Это поведение можно изменить с помощью атрибута panelWidth:

  • auto — список совпадает по ширине с полем, но не становится меньше panelMinWidth.
  • число или CSS-значение — используется как точная ширина, поэтому panelMinWidth к ней не применяется.

Список не становится меньше panelMinWidth (по умолчанию 200 px). Чтобы снять это ограничение, задайте panelMinWidth равным 0.

Рост по содержимому останавливается на 640 px. Ограничение мягкое: оно не делает список меньше ширины поля и не уменьшает явно заданный panelWidth. Изменить его можно атрибутом panelMaxWidth или глобально через токен --kbq-panel-size-width-max.

Для определенного выпадающего списка:

@Component({
    template: `
        <kbq-form-field>
            <kbq-tree-select [panelWidth]="700">...</kbq-tree-select>
        </kbq-form-field>
    `
})

Для всех выпадающих списков в модуле, используя Dependency Injection при помощи kbqTreeSelectOptionsProvider провайдера:

import { kbqTreeSelectOptionsProvider } from '@koobiq/components/tree-select';

@NgModule({
    providers: [
        kbqTreeSelectOptionsProvider({ panelWidth: 'auto' })
    ]
})
Предложения по улучшению
Если вы нашли ошибку или хотите доработать статью, создайте запрос на GitHub.