Css 如何以Angular 将下拉面板的宽度与其文本框对齐

发布于01月18日

我遵循这个答案，将下拉面板显示在下拉文本框的正下方或正上方

现在我有相同的下拉面板这样..

<mat-select disableOptionCentering (selectionChange)="validateInputs(userForm)" formControlName="siteId" placeholder="Select Site ID"       panelClass="custom-panel-siteId">
     <input 
     (keyup)="onFilterOptions($event.target.value)" 
     matInput
     class="filter-select-options"
     autocomplete="off"
     type="text"
     placeholder="Search Site ID">
    <mat-option *ngFor="let option of filteredOptions" [value]="option">
    {{option}}
    </mat-option>
</mat-select>

但该面板延伸到文本框之外，如下所示……

正如以黄色突出显示的那样，面板的宽度正在略微增加.

另外，我在styles.scss文件中使用了下面的代码..但它没有正确对齐..

.custom-panel-siteId {
  margin: 45px 0px !important;
}

EDIT个

当我在开发人员工具中执行判断元素时，样式详细信息如下

任何帮助都将不胜感激.

SECOND EDIT个

现在，随着最新的代码更改，面板将按照下拉文本框的宽度显示.但它的左侧移动幅度很小，如下所示.

Css 如何以Angular 将下拉面板的宽度与其文本框对齐

推荐答案

Css相关问答推荐

在COLOR-MIX()中使用var()似乎会使其对于不支持COLOR-MIX()的浏览器具有可读性，从而阻止了回退的工作

如何根据屏幕宽度覆盖SCSS变量？

CSS子网格不显示行间距

指定from_max和to_min值时隐藏Shiny sliderTextInput下的行

如何为 MUI Slider 字段中 markLabel 的第一个和最后一个实例提供边距？

滚动弹性盒

为什么 width： 100% 在 Flex 父级中缩小这个 div ？

在网格中整齐地对齐项目

将 tailwincss 转换为普通 CSS？

Angular 以Angular 获取当前聚焦的元素

如何在流线型多页面应用程序中在表情符号和页面名称之间留出一些空白

直观地指示 IFrame 内的表单正在提交，但没有 javascript

JavaFX TreeTableView Css for unfocused selected line

CSS Stepper - LI After Overlaying LI Before

CSS，居中的 div，缩小以适应？

使用 CSS 剪辑/裁剪背景图像

css显示：表格不显示边框

CSSzoom 高度以匹配宽度 - 可能与外形尺寸

带有 flexbox 的 css 正方形网格

使图像具有响应性 - 最简单的方法