Issue
I need to get something like this
but I get this
the badge can't get over it the button, the corner is hidden. the code:
html
<ion-button (click)="onClick()" color="primary" fill="solid"> 1
<ion-badge color="dark" >2</ion-badge>
</ion-button>
scss
ion-badge{
position: absolute;
font-size: 8pt;
right: -16px;
top: -3px;
}
ion-button{
margin: 5px;
width: 40px;
height: 40px;
position: relative;
overflow: visible!important;
}
Solution
In your case setting overflow: visible!important;
to ion-button
element will not solve the issue. This is because, deep inside the ion-button
there is a button
with class button-native
which is inside the shadow-dom. This class has overflow: hidden
defined inside the style definition. You have to update this style to enable the overflow of button.
Refering to this tutorial you can add style for the shadow dom element as follows.
Template
<ion-button (click)="onClick()" class="custom-class" color="primary" fill="solid">
1
<ion-badge color="dark" >2</ion-badge>
</ion-button>
CSS
ion-badge {
position: absolute;
font-size: 8pt;
right: -16px;
top: -3px;
}
ion-button {
margin: 5px;
width: 40px;
height: 40px;
position: relative;
// overflow: visible!important;
}
/* Setting Overflow Visible */
ion-button.custom-class::part(native) {
overflow: visible;
}
Answered By - Nitheesh
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.