0

I want to style hovering on each mat-option text, I wan the text to displayed outside mat-option. In order to achieve this, I applied z-index of very high value, but nothing changed. I tried add z-index to higher value but this hasn't worked out.

I was inspired by the following stackblitz link

This is the current behaviour

enter image description here

Here is what I need enter image description here

Here is the code snippet

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;
        }
    }); 
  }

template.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;


        }
    }
}
karansys
  • 2,449
  • 7
  • 40
  • 78
  • Your code is missing parts making is difficult to reproduce the issue. E.g. `customerFilterControl` is missing. – ViqMontana Jan 13 '20 at 14:12
  • Sorry I will update the question – karansys Jan 13 '20 at 14:13
  • I have updated the question , customerFilterControl :FormControl. Let me know if more info is needed – karansys Jan 13 '20 at 14:15
  • I'm not quite sure what's going on here, the code seems to be riddled with mistakes. I've created a Stackblitz for you [here](https://stackblitz.com/edit/angular-e2vbzj-jvl6bw) if you'd like to explain further. – ViqMontana Jan 13 '20 at 14:24
  • Hi viqas, I have two span elements, one of them is made display:none but when hovering over mat-option, both the span appears, {{c.AccountName}}. I have edited the stackbilitz https://angular-e2vbzj-jvl6bw.stackblitz.io/ – karansys Jan 13 '20 at 14:35
  • I have added the new span tag and made para2 display: none by default in the question – karansys Jan 13 '20 at 14:38
  • Hi, any suggestion or will this be possibel or not? – karansys Jan 13 '20 at 14:54
  • I'm really not sure as I don't understand what/why you want to do. – ViqMontana Jan 13 '20 at 14:55
  • Its mat-autocomplete when I hover over each mat-option, I want to get style as shown in the figure above – karansys Jan 13 '20 at 14:59
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/205873/discussion-between-karansys-and-viqas). – karansys Jan 13 '20 at 15:02

1 Answers1

4

Have you considered using matTooltip for each mat-option when hovering above each option?

Add a 

matTooltip="{{state.name}} | Population: {{state.population}}"

on mat-option and the angular material does the rest.

check working example here

Themistoklis Bogiatzoglou
  • 459
  • 2
  • 7
  • 21