Menu
I am working in my Ionic 4 project and I have added the ion-avatar but it is not coming in the center of the
This is my editprofile.page.html:
<ion-item class="newitem2">
<ion-avatar>
<img name="profile_pic" [src]="this.userdetailsedit.value.profile_pic"/>
</ion-avatar>
</ion-item>
Any help is much appreciated.
470
You can use ionic CSS utilities to align center by applying the attribute text-center to the parent element of the one you want to center horizontally. In your case I would wrap the <img> in a <div> so that it affects only the image and not the <p> elements. Show activity on this post.
Avatars can be used by themselves or inside of any element. If placed inside of an ion-chip or ion-item , the avatar will resize to fit the parent component.
Simply give pointer-events:none css to disable click. Show activity on this post. This will remove ripple effect but will keep the element clickable. For example, you can have ion-checkbox inside ion-item and pointer-events:none; will prevent from clicking on it which might not be the behaviour that you need.
Sliding List: Sliding elements can swipe left or right to reveal a set of hidden buttons. To use a sliding item, add a <ion-item-sliding> element inside of an <ion-list> element. Next, add a <ion-item-options> element within the slider to accommodate the buttons. By default, the buttons are on the right side.
please add class on ion-avatar
your html file looks like
<ion-item class="newitem2">
<ion-avatar class="image-center">
<img name="profile_pic" [src]="this.userdetailsedit.value.profile_pic"/>
</ion-avatar>
</ion-item>
add this scss
.image-center{
margin:0 auto;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
