css - 如何修复自动完成覆盖缺陷？
问题描述
这里我放置了与缺陷相关的示例代码，我在 p-autoComplete 标记中使用了appendTo="body"因为这些我有一个缺陷，如果您单击下拉菜单并将鼠标滚动到屏幕上，您可以找到它，请建议我如何使用 CSS 修复这些缺陷 单击此处查看缺陷图像
app.component.html
<div class="ui-g-12">
<div class="ui-g-12 ui-md-4 ui-lg-4 filter-wrapper dropshadow addBorder"
style="padding-top: 5px; padding-left: 0px; padding-right: 0px" >
<div class="clearSearchButton" style="border-bottom: 1px solid #efefef">
<h2 class="search-title pad-left10">Search</h2>
<button pButton class="clearSearch pull-right mar-top10 mar-right8 ui-button-tertiary" (click)="clearSearch()">
Clear Search
</button>
</div>
<p-scrollPanel [style]="{ height: 'calc(100vh - 291px)', overflow: 'visible !important' }" styleClass="custom"
class="customSearchScroll" #searchScrollPanel>
<p>
Bioinspired, biomimetic and nanobiomaterials are emerging as the most promising area of research within the area of biological materials science and engineering. The technological significance of this area is immense for applications as diverse as tissue engineering and drug delivery biosystems to biomimicked sensors and optical devices. Bioinspired, Biomimetic and Nanobiomaterials provides a unique scholarly forum for discussion and reporting of structure sensitive functional properties of nature inspired materials.
</p>
<p>
Bioinspired, biomimetic and nanobiomaterials are emerging as the most promising area of research within the area of biological materials science and engineering. The technological significance of this area is immense for applications as diverse as tissue engineering and drug delivery biosystems to biomimicked sensors and optical devices. Bioinspired, Biomimetic and Nanobiomaterials provides a unique scholarly forum for discussion and reporting of structure sensitive functional properties of nature inspired materials.
</p>
<p>
Bioinspired, biomimetic and nanobiomaterials are emerging as the most promising area of research within the area of biological materials science and engineering. The technological significance of this area is immense for applications as diverse as tissue engineering and drug delivery biosystems to biomimicked sensors and optical devices. Bioinspired, Biomimetic and Nanobiomaterials provides a unique scholarly forum for discussion and reporting of structure sensitive functional properties of nature inspired materials.
</p>
<p>
Bioinspired, biomimetic and nanobiomaterials are emerging as the most promising area of research within the area of biological materials science and engineering. The technological significance of this area is immense for applications as diverse as tissue engineering and drug delivery biosystems to biomimicked sensors and optical devices. Bioinspired, Biomimetic and Nanobiomaterials provides a unique scholarly forum for discussion and reporting of structure sensitive functional properties of nature inspired materials.
</p>
<p>
Bioinspired, biomimetic and nanobiomaterials are emerging as the most promising area of research within the area of biological materials science and engineering. The technological significance of this area is immense for applications as diverse as tissue engineering and drug delivery biosystems to biomimicked sensors and optical devices. Bioinspired, Biomimetic and Nanobiomaterials provides a unique scholarly forum for discussion and reporting of structure sensitive functional properties of nature inspired materials.
</p>
<p>
Bioinspired, biomimetic and nanobiomaterials are emerging as the most promising area of research within the area of biological materials science and engineering. The technological significance of this area is immense for applications as diverse as tissue engineering and drug delivery biosystems to biomimicked sensors and optical devices. Bioinspired, Biomimetic and Nanobiomaterials provides a unique scholarly forum for discussion and reporting of structure sensitive functional properties of nature inspired materials.
</p>
<p>
Bioinspired, biomimetic and nanobiomaterials are emerging as the most promising area of research within the area of biological materials science and engineering. The technological significance of this area is immense for applications as diverse as tissue engineering and drug delivery biosystems to biomimicked sensors and optical devices. Bioinspired, Biomimetic and Nanobiomaterials provides a unique scholarly forum for discussion and reporting of structure sensitive functional properties of nature inspired materials.
</p>
<p>
Bioinspired, biomimetic and nanobiomaterials are emerging as the most promising area of research within the area of biological materials science and engineering. The technological significance of this area is immense for applications as diverse as tissue engineering and drug delivery biosystems to biomimicked sensors and optical devices. Bioinspired, Biomimetic and Nanobiomaterials provides a unique scholarly forum for discussion and reporting of structure sensitive functional properties of nature inspired materials.
</p>
<p>
Bioinspired, biomimetic and nanobiomaterials are emerging as the most promising area of research within the area of biological materials science and engineering. The technological significance of this area is immense for applications as diverse as tissue engineering and drug delivery biosystems to biomimicked sensors and optical devices. Bioinspired, Biomimetic and Nanobiomaterials provides a unique scholarly forum for discussion and reporting of structure sensitive functional properties of nature inspired materials.
</p>
<p>
Bioinspired, biomimetic and nanobiomaterials are emerging as the most promising area of research within the area of biological materials science and engineering. The technological significance of this area is immense for applications as diverse as tissue engineering and drug delivery biosystems to biomimicked sensors and optical devices. Bioinspired, Biomimetic and Nanobiomaterials provides a unique scholarly forum for discussion and reporting of structure sensitive functional properties of nature inspired materials.
</p>
<div class="ui-g-12">
<p-autoComplete appendTo="body" #b2bdoctype [forceSelection]="true" formControlName="b2bDocType" placeholder="B2B-Doc-Type"
emptyMessage="No Result Found" [suggestions]="filteredBrands"
(completeMethod)="filterBrands($event)" [(ngModel)]="brand" [style]="{'width':'100%', 'word-break': 'break-word'}"
[inputStyle]="{'width':'100%'}" [dropdown]="true" [minLength]="1">
</p-autoComplete>
</div>
<p>
Bioinspired, biomimetic and nanobiomaterials are emerging as the most promising area of research within the area of biological materials science and engineering. The technological significance of this area is immense for applications as diverse as tissue engineering and drug delivery biosystems to biomimicked sensors and optical devices. Bioinspired, Biomimetic and Nanobiomaterials provides a unique scholarly forum for discussion and reporting of structure sensitive functional properties of nature inspired materials.
</p>
<p>
Bioinspired, biomimetic and nanobiomaterials are emerging as the most promising area of research within the area of biological materials science and engineering. The technological significance of this area is immense for applications as diverse as tissue engineering and drug delivery biosystems to biomimicked sensors and optical devices. Bioinspired, Biomimetic and Nanobiomaterials provides a unique scholarly forum for discussion and reporting of structure sensitive functional properties of nature inspired materials.
</p>
<p>
Bioinspired, biomimetic and nanobiomaterials are emerging as the most promising area of research within the area of biological materials science and engineering. The technological significance of this area is immense for applications as diverse as tissue engineering and drug delivery biosystems to biomimicked sensors and optical devices. Bioinspired, Biomimetic and Nanobiomaterials provides a unique scholarly forum for discussion and reporting of structure sensitive functional properties of nature inspired materials.
</p>
<p>
Bioinspired, biomimetic and nanobiomaterials are emerging as the most promising area of research within the area of biological materials science and engineering. The technological significance of this area is immense for applications as diverse as tissue engineering and drug delivery biosystems to biomimicked sensors and optical devices. Bioinspired, Biomimetic and Nanobiomaterials provides a unique scholarly forum for discussion and reporting of structure sensitive functional properties of nature inspired materials.
</p>
<p>
Bioinspired, biomimetic and nanobiomaterials are emerging as the most promising area of research within the area of biological materials science and engineering. The technological significance of this area is immense for applications as diverse as tissue engineering and drug delivery biosystems to biomimicked sensors and optical devices. Bioinspired, Biomimetic and Nanobiomaterials provides a unique scholarly forum for discussion and reporting of structure sensitive functional properties of nature inspired materials.
</p>
<p>
Bioinspired, biomimetic and nanobiomaterials are emerging as the most promising area of research within the area of biological materials science and engineering. The technological significance of this area is immense for applications as diverse as tissue engineering and drug delivery biosystems to biomimicked sensors and optical devices. Bioinspired, Biomimetic and Nanobiomaterials provides a unique scholarly forum for discussion and reporting of structure sensitive functional properties of nature inspired materials.
</p>
<p>
Bioinspired, biomimetic and nanobiomaterials are emerging as the most promising area of research within the area of biological materials science and engineering. The technological significance of this area is immense for applications as diverse as tissue engineering and drug delivery biosystems to biomimicked sensors and optical devices. Bioinspired, Biomimetic and Nanobiomaterials provides a unique scholarly forum for discussion and reporting of structure sensitive functional properties of nature inspired materials.
</p>
<p>
Bioinspired, biomimetic and nanobiomaterials are emerging as the most promising area of research within the area of biological materials science and engineering. The technological significance of this area is immense for applications as diverse as tissue engineering and drug delivery biosystems to biomimicked sensors and optical devices. Bioinspired, Biomimetic and Nanobiomaterials provides a unique scholarly forum for discussion and reporting of structure sensitive functional properties of nature inspired materials.
</p>
<p>
Bioinspired, biomimetic and nanobiomaterials are emerging as the most promising area of research within the area of biological materials science and engineering. The technological significance of this area is immense for applications as diverse as tissue engineering and drug delivery biosystems to biomimicked sensors and optical devices. Bioinspired, Biomimetic and Nanobiomaterials provides a unique scholarly forum for discussion and reporting of structure sensitive functional properties of nature inspired materials.
</p>
<p>
Bioinspired, biomimetic and nanobiomaterials are emerging as the most promising area of research within the area of biological materials science and engineering. The technological significance of this area is immense for applications as diverse as tissue engineering and drug delivery biosystems to biomimicked sensors and optical devices. Bioinspired, Biomimetic and Nanobiomaterials provides a unique scholarly forum for discussion and reporting of structure sensitive functional properties of nature inspired materials.
</p>
</p-scrollPanel>
<div appShortcut class="ui-g-12 pad0 filter-footer">
<div class="ui-g-11 favoritesFooter pad-right7">
<button pButton appShortcut="ctrl+alt+1" label="Search" class="mar-top5" (click)="search(1)"></button>
</div>
</div>
</div>
</div>
app.component.ts
=================
export class AppComponent implements OnInit {
brands: string[] = ['Audi', 'BMW', 'Fiat', 'Ford', 'Honda', 'Jaguar', 'Mercedes', 'Renault', 'Volvo', 'VW'];
filteredBrands: any[]; brand: string;
constructor() { }
ngOnInit() {
}
filterBrands(event) {
this.filteredBrands = [];
// tslint:disable-next-line:prefer-for-of
for (let i = 0; i < this.brands.length; i++) {
const brand = this.brands[i];
if (brand.toLowerCase().indexOf(event.query.toLowerCase()) === 0) {
this.filteredBrands.push(brand);
}
}
}
}
app.component.scss
===================
// @import '~ngx-prime-theme/theme/_typography.scss';
// @import '~ngx-prime-theme/theme/_colors.scss';
@keyframes ui-progress-spinner-color {
100%,
0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%,
90% {
stroke: #ffa700;
}
}
.cal {
z-index: 5;
position: absolute;
width: 70%;
background-color: white;
}
.right {
right: 6%;
}
.left{
left: 1%;
}
.filter-wrapper {
border-radius: 6px;
border-style: solid;
border-color: #efefef;
background: white;
height: 100%;
padding-top: 5px;
.filter-form {
height: 100%;
}
.search-title {
// @include getTypographyStyles('h2');
display: inline-block;
font-size: 20px;
}
.clearSearchButton {
padding-right: 10px;
}
.fav-back-color {
background-color: blue($color: #000000);;
}
.filter-footer {
padding: 10px;
float: right;
border-top: 1px solid #efefef;
}
.text-gray {
color: #efefef;
}
}
.gridCss {
border-radius: 6px;
border-style: solid;
border-color: #efefef;
background: white;
margin-top: 0px;
}
.addBorder {
border-bottom: 1px solid #efefef;
}
.clearSearch {
cursor: pointer;
}
.customSearchScroll {
.ui-scrollpanel-content {
height: calc(100% + 18px);
width: calc(100% + 118px);
padding: 1em 0;
position: relative;
overflow: auto;
box-sizing: border-box;
}
&,
&:hover {
.ui-scrollpanel-bar-y {
margin-left: -1px;
width: 7px !important;
}
}
}
// .searchScrollPanel /deep/ .ui-scrollpanel-bar-x {
// display: none !important;
// float: right;
// }
.filter-footer {
padding: 10px;
float: right;
border-top: 1px solid #efefef;
}
.favoritesFooter {
text-align: right;
margin-left: 0;
width: 100%;
}
:host ::ng-deep input {
width: 100%;
}
::ng-deep .ui-calendar.ui-calendar-w-btn .ui-inputtext {
font-size: 14px;
width: 100% !important;
}
:host ::ng-deep #b2 .ui-button:not(.ui-button-icon-only) {
min-width: 0px;
}
.borderCurve {
padding: 0px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px
}
// .main-content /deep/ .ui-table-scrollable-body {
// height: calc(100vh - 317px);
// }
.classh3 {
font-family: "Proxima Nova SEMIBOLD", Helvetica, Arial, Sans-Serif;
font-size: 1.125rem;
line-height: 1.375rem;
letter-spacing: 0.01rem;
text-transform: none;
margin: 0;
}
.messageErr {
font-family: "Proxima Nova SEMIBOLD", Helvetica, Arial, Sans-Serif;
font-size: 1.25rem;
line-height: 1.5rem;
letter-spacing: 0.01rem;
text-transform: none;
height: calc(100vh - 292px);
color: #939393;
}
.messageErr, .message-wrapper {
font-size: 50px;
}
.calBorder {
border: 1px solid #c9c9c9;
box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.2);
border-radius: 7px;
margin-top: 2px;
}
.display-middle {
position: relative;
text-align: center;
display: block;
top: 35%;
padding: 10px;
line-height: 40px;
}
.searchWidth {
width: 254px;
margin-top: -6px;
}
.iconsHolder {
position: relative;
bottom: 2px;
}
.buttonStyle {
background: transparent;
padding: 5px;
border: none;
outline: none;
cursor: pointer;
display: inline-block;
font-size: 16px;
height: 44px;
color: gray;
margin-top: -5px;
}
.filterColor {
color: blue;
outline: none;
cursor: pointer;
}
::ng-deep .custom-accordion .ui-accordion .ui-accordion-header {
background-color: white;
border-bottom: solid 1px #efefef;
padding: 0px;
}
::ng-deep .custom-accordion .ui-accordion .ui-accordion-header:hover {
background-color: white;
}
::ng-deep .custom-accordion-segment .ui-accordion .ui-accordion-header a {
padding-left:15px;
.ui-accordion-toggle-icon {
position: absolute;
right: 9px;
color: #007dba;
}
}
::ng-deep p-calendar {
.ui-datepicker {
top: 36px !important;
width: 275px;
}
}
::ng-deep .ui-timepicker {
text-align: center;
padding: 0;
}
#cursorPointer {
cursor: pointer;
}
#cursorPointer:hover {
color: #007dba;
}
// .no-border {
// /deep/ .ui-accordion-header{
// border-bottom: none !important;
// }
// }
.autocompleteFilter {
::ng-deep .ui-accordion-content.ui-widget-content {
padding: 0px 15px 20px;
}
}
::ng-deep p-accordion .ui-accordion .ui-accordion-content-wrapper:not(.ui-accordion-content-wrapper-overflown) {
box-shadow: none;
}
.filter-title {
color: #939393;
font-family: "Helvetica Neue LT Pro 55 ROMAN", Helvetica, Arial, Sans-Serif;
font-size: 0.75rem;
line-height: 1rem;
letter-spacing: 0.01rem;
}
.noRecordDisplay{
height: calc(100vh - 317px);
background: white;
color: #939393; font-family: "Proxima Nova SEMIBOLD", Helvetica, Arial, Sans-Serif;
letter-spacing: 0.01rem;
}
.minimum-column-width {
box-sizing: border-box;
// @include getTypographyStyles('h6');
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
padding-bottom: 5px !important;
}
.headerHeight {
padding-top: 5px;
height: 35px;
}
:host ::ng-deep p-paginator .ui-paginator {
text-align: left;
margin: 1px;
padding: 0.5em;
height: 29px;
}
::ng-deep p-paginator .ui-paginator .ui-paginator-element .ui-paginator-icon.pi-caret-left:before {
margin-left: 15px;
}
::ng-deep .pi-step-backward:before {
margin-left: 15px;
}
.td {
font-family: "Helvetica Neue LT Pro 55 ROMAN", Helvetica, Arial, Sans-Serif;
font-size: 0.625rem;
line-height: 0.875rem;
letter-spacing: 0rem;
text-transform: none;
color: #444444;
padding-top: 6px;
padding-bottom: 6px;
}
::ng-deep .tooltip .ui-tooltip-text {
width: 100%;
word-wrap: break-word;
white-space: initial;
}
::ng-deep p-dropdown .ui-dropdown .ui-dropdown-label.ui-placeholder {
width: 100%;
}
解决方案
推荐阅读
- authentication - 如何在访问 Google App 的多个服务之间共享凭据
- vba - 如何将空白转换为制表符
- sas - SAS：IF 语句中的通配符
- javascript - 单击按钮本身不会播放视频
- autodesk-forge - 无法为 Autodesk BIM 360 docs 项目创建 webhook
- angularjs - 未在 ui-view 中加载的部分 html 之一
- docker - Spring Boot Docker com.netflix.discovery.shared.transport.TransportException：无法在任何已知服务器上执行请求
- text - 与 gedit 中的文本选择进行比较
- javascript - 从javascript数组变量设置元素oninput
- php - Htaccess 错误 404 子目录