Issue
I am currently migrating from angular 16 to angular 17. Its a mat-icon to delete an entry from a list in a mat menu with some information text next to it. Before everything was aligned correctly but after the update the generated html code adds a span-tag with a class called "mat-mdc-menu-item-text". Angular automatically places all the text in the mat-menu-item in the mat-mdc-menu-item-text span and leaves the mat-icon outside of the generated span tag causing the icon to be completely misaligned with the text. Is there a possibility to deactivate this generated span or move the mat-icon into it?
Here the angular template
<div mat-menu-item *ngFor="let ele of arr; let i = index" class="one-row">
<mat-icon class="one-cell"
(click)="click($event, i)">clear
</mat-icon>
<span class="one-cell">
{{ele.info}}
</span>
<span class="one-cell">
{{ele.info2}}
</span>
</div>
</div>
And here is exemplary the html from chromes inspector for one row of the mat-menu:
<div class="one-row ...">
<mat-icon class="...">clear<mat-icon>
<span class="mat-mdc-menu-item-text">
<span class="...">ele.info</span>
<span class="...">ele.info2</span>
</span>
</div>
The <span class="mat-mdc-menu-item-text">
adds some padding and line-height that changes the design of the row completely.
Solution
While Naren Murali's answer, with setting the css properties, is correct, I generally do not want to use the important
property if possible but I found another workaround: Since all the span tags get moved to the menu-item-text I wrapped the content of the mat-menu-item with another span and aligned it afterwards like this
app.component.html
<div mat-menu-item *ngFor="let ele of arr; let i = index" class="one-row">
<span class="container">
<mat-icon class="one-cell"
(click)="click($event, i)">clear
</mat-icon>
<span class="one-cell">
{{ele.info}}
</span>
<span class="one-cell">
{{ele.info2}}
</span>
</span>
</div>
app.component.scss
.container {
height: 100%;
.mat-mdc-menu-item {
vertical-align: middle;
height: 20px;
}
}
.one-row {
display: table-row;
}
.one-cell {
display: table-cell;
}
Answered By - lef
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.