Customize SfListView avatar size
How do I customize the avatar size in a list view without it overlapping the text?
Changing the CSS width make sit overlap:
Hi nicki,
Greetings from Syncfusion support.
To adjust the avatar size in the ListView without it overlapping the text, you’ll need to update the CSS as follows:
- Increase the left padding of the .e-list-wrapper element to accommodate the larger avatar size.
- Set the desired width and height for the avatar using the .e-avatar class.
Here's an example of how you can achieve this:
[Style.css]
|
.e-listview.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) { padding-left: 190px; /* Adjust based on avatar width */ padding-right: 1.0666em; }
.listview-template.e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar { background: transparent; width: 170px; /* Custom width */ height: 90px; top: 50%; transform: translateY(-50%); }
|
This will ensure the avatar is resized as per your requirement and remains properly aligned without overlapping the adjacent text content.
For more details on customizing templates in ListView, please refer to our documentation:
Customizing Templates - Syncfusion Blazor ListView
Sample : A working sample is attached as a ZIP file for your reference.
Check out the sample and let us know if you need further assistance.
Regards,
Saravanan J
Attachment: BlazorListview_57fc35e7.zip
