各 mat-option テキストにカーソルを合わせてスタイルを設定したいのですが、テキストを mat-option の外に表示したいです。これを実現するために、非常に高い値の z-index を適用しましたが、何も変わりませんでした。z-index をより高い値に追加しようとしましたが、うまくいきませんでした。
これが現在の動作です
ここにコードスニペットがあります
template.html
<mat-form-field [style.cursor]="pointer" [style.width.px]=450 >
<input id="inputCustomer" matInput [matAutocomplete]="auto" [formControl]="customerFilterControl" [(ngModel)]="customerName">
<mat-autocomplete style="left:775px;" #auto="matAutocomplete" [displayWith] = "displayFn" >
<mat-option (onSelectionChange)="onCustomerChange(customer)" [value] ="customer.AccountID +' '+'('+ customer.AccountName + ')'">
<span>{{customerName}}</span>
<span id="para2">{{customerName}}</span>
</mat-option>
</mat-autocomplete>
template.ts
customer:Array<any>;
filteredOptions: Observable<any[]>;
customerFilterControl = new FormControl();
customer =[
{
AccountID :1,
AccountName:"account1"
},
{
AccountID:2,
AccountName:"account2"
},
{
AccountID:3,
AccountName:"Earliest_Creation_Date_Ent_Tests_id7 (Earliest_Creation_Date_Ent_Tests_id7accountName)"
}
displayFn(subject) {
return subject ? subject : undefined;
}
onCustomerChange(customer) {
this.filteredOptions = this.customerFilterControl.valueChanges.pipe(
startWith(''),
map(value => this._filter(value))
);
}
_filter(value:any):any[] {
const filterValue = value;
return this.customers.filter(function (option) {
if(option.AccountID.includes(filterValue) | option.AccountName.includes(filterValue)) {
return option;
}
});
}
テンプレート.scss
#para2 {
display:none;
}
.mat-option:hover {
background-color: white !important;
z-index:500000 !important;
width:440px !important;
word-break: break-all !important;
}
.mat-option-text {
padding-left: 60px !important;
overflow: auto !important;
text-overflow: unset !important;
}
.mat-option {
&:hover {
white-space: unset!important;
overflow: unset !important;
background-color: #FFFFFF;
#para2
{
z-index:500000 !important;
width:400px !important;
word-break: break-all !important;
display: block;
position: relative !important;
overflow: visible !important;
text-align: left;
top:0px;
right:50px !important;
background-color: #232F34;
color:#FFFFFF;
border: 5px !important;
font-size:11px;
}
}
}