Question

当前下拉框的宽度大于行的宽度：

有没有办法消除多余的宽度？

这是我当前的代码：

html：

export class TitleService {
    constructor(private _config: ConfigService, private _title: Title, private _translate: TranslateService, private _router: Router) {
        this._router.events.pipe(filter(o => o instanceof NavigationEnd)).pipe(flatMap(((o: NavigationEnd) => {
            if (!o.urlAfterRedirects.startsWith('/run/') || o.urlAfterRedirects.indexOf('~') > -1)
                return  (<Observable<string>>this._translate.get('CURRENT_MODEL.TITLE'));
            else {
                const url = o.urlAfterRedirects.substring(1)/*skip starting slash*/.split('/').slice(2);
                let list = this._config.runPages;
                let find = this._config.runPages[0];
                for (let i = 0; i < url.length; ) {
                    const index = list.findIndex(rp =>
                        rp.identifier.split('/').every((part, index2) =>
                            part.startsWith(':') || part === url[i + index2])
                    );

                    if (index === -1) throw new Error(url[i] + ' not found in run page hierarchy');
                    find = list[index];

                    list = find.children || [];
                    i += find.identifier.split('/').length;
                }
                return Rx.pipe(zip((<Observable<string>>this._translate.get('CURRENT_MODEL.TITLE')),  (<Observable<string>>this._translate.get(`CURRENT_MODEL.RUN_PAGES.${find.displayTitle.toUpperCase()}`)).pipe(map(r => `${r[0]} - ${r[1]}`))));
            }
        }).subscribe(ret => this._title.setTitle(ret))));
    }
}

my_list：

<mat-form-field>
    <mat-select disableOptionCentering placeholder="Choose an option">
      <mat-option [value]="option" *ngFor="let option of my_list">
          {{ option }}
      </mat-option>
    </mat-select>
</mat-form-field>

style.css：

export const my_list: string[] = [ "a", "b", "c", "d"];

Answer 1

尝试一下并更改宽度：

Answer 2

对于任何仍在试图弄清楚而不使实际选择更小或更宽的人。

mat-select-panel 使用 100% 的 mat-select 宽度加上 32px

min-width: calc(100% + 32px)

您可以使用 ng-deep 覆盖此样式：

::ng-deep .mat-select-panel {
    min-width: 100% !important;
}

Answer 3

尝试一下

.mat-select-panel：not（[class * = mat-elevation-z]）{ 最小宽度：calc（100％+ 0px）！important; }

Answer 4

在mat-form-field标签级别设置宽度。试试这个，

<mat-form-field style="width:50px">

Answer 5

\add 类到 mat-form-field 标签

\并将样式写入该类

.input-container {
  width: 100%;
  \\  enter code here
}

角材垫选择下拉宽度

5 个答案: