Creating a unique design with text in a circular format

When styling customer initials within a circle, I sometimes encounter issues with font alignment, as seen in the image below where EW is not centered properly.

In this code snippet, I am using border-radius to create circular shapes for displaying customer initials. If a photo is available, it is overlaid on top as a temporary fix.

The challenge arises when trying to center the initials perfectly within the circle due to font restrictions.

<i [ngStyle]="{'background-color': dataItem.backgroundColor}" 
style= "display: inline-flex; 
align-items: center;
height: 25px; 
width: 25px;
border-radius: 50%;
border: white; 
border-style: solid; 
border-width: 1px;" >


<span style="margin: 5px 0 0 4px; color: #000;font: 12px Arial;">
{{ dataItem.custInitials }}
</span>
<img src="{{ './assets/profiles/customers/' + dataItem.UID + '.jpg' }}" 
onerror="this.style.display='none'; this.className='' "
(error)="noImage=true"
height="25" width="25" style="border-radius:30px; margin: -1px 0 0 -23px;" />
</i>
https://i.sstatic.net/FDQdw.png
angularjsangularcss

Answer №1

To improve the design, first remove all inline styles as they are unnecessary.

Next, remove the margins on the span and use justify-content on the parent element since you are already using flex.

Instead of using the img tag, consider incorporating it into your [ngStyle] declaration to set it as a background-image for cleaner HTML structure and more visually appealing icons.

For example:

[ngStyle]="{'background-color': dataItem.backgroundColor, 
            'background-image': 'url(./assets/profiles/customers/' + dataItem.UID + '.jpg)'}"

If the image fails to load, the background color will be displayed instead.

See below for a demonstration:

.profile-dot {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  width: 3rem;
  background-color: lightgray;
  border-radius: 50%;
  border: gray 2px solid;
  background-size: cover;
  background-position: center;
  background-repeat: none;
}

.profile-dot span {
  font-weight: 700;
  color: #fff;
  font-style: normal;
  font-size: 120%;
}
<i class="profile-dot" style="background-image: url(https://i.sstatic.net/BVW9D.jpg)">
  <span>CW</span>
</i>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript heap runs out of memory in Angular testing because of extensive mock data

While working on testing in angular 4, I encountered a need for large amounts of data in my test cases. Specifically, I needed to dynamically require JSON files in my spec files, each ranging from approximately 4 to 5 MB. As part of the process... it(& ...

angulartestingkarma-jasmine

What are some methods for toggling text visibility in PHP?

I am facing confusion regarding the functionality of this code. Here is the snippet in question : //start date to end date <?php if($show5 < $show6) { ?> <a>show content</a> <?php }?> If both 'start da ...

phphtmlcss

Error in Cordova integration with Razorpay [RazorPayCheckout not found]

I'm encountering an issue where I'm getting a "RazorPayCheckout is not defined" error. I've searched on StackOverflow but couldn't find any helpful answers. Can someone please assist me with this? Thank you in advance. app.component.ht ...

angulartypescriptcordovaionic-frameworkrazorpay

The concept of CSS inheritance within div elements

I've been researching extensively about the concept of CSS inheritance, but I have come across a puzzling question that remains unanswered. Consider the code snippet below: <!DOCTYPE HTML> <html> <head> <style type="text/css"> ...

csshtmlinheritance

Customizing label printing using HTML and CSS. Learn how to dynamically adjust label and container sizes based on label dimensions

After spending some time developing the code for a label size of 5cm by 2.2cm, I have successfully printed it without any issues. Now, my goal is to create a flexible solution that automatically adjusts font sizes and containers for various label sizes. T ...

htmlcssprintinglabelautosizing

How to access ng-model value within ng-repeat with ng-change

Hey everyone, I'm new to working with Angular and I've been facing some issues trying to retrieve the value of ng-model from within ng-repeat. Currently, I have an array of users and my goal is to assign different access levels to each user use ...

angularjsangularjs-ng-repeatangular-ngmodel

Swapping out LinkButtons using jQuery

[EXPLANATION] (apologies for the length) In my gridview, users have the option to add a new entry or edit an existing one. When they click on either 'Add' or 'Edit', a popup window appears for them to input the information for the new ...

jqueryasp.netcss

Imitate a required component in a service

I am currently facing an issue with mocking a dependency in a service. I am not sure what is causing the problem. It's not the most ideal class to test, but I am mainly focused on code coverage. Below is the code for the service: @Injectable() export ...

angulartypescriptjestjs

Django - issue with table display showing empty row due to query set

In my project, I have two models: one named Season and the other one named Game: # Season class Season(models.Model): teams = models.ManyToManyField('Team', related_name='season_teams', blank=True) current = models.BooleanF ...

pythonhtmlcssdjangosass

Footer refusing to stay fixed at the bottom of the viewport

Currently, I am utilizing fullpage.js with scrolloverflow.js activated on the second section. In this setup, I would like to have a footer that remains fixed at the bottom of the viewport for the second section only. However, instead of achieving this desi ...

javascriptjqueryhtmlcssfullpage.js

Fade effects on hover with a changing background color

Here is the CSS code to be used: #onec-fourth:hover { background-color: #F36DE1; color: white; } I am looking to keep the background color and text color effects for 1 second after I move my mouse off the object (#onec-fourth). Currently, when I mov ...

htmlcss

Issue encountered while attempting to download a file using DRF with Angular integration

My current project involves using DRF and Angular. I have successfully implemented a file download feature on localhost with the following code: @action(methods=['get'], detail=True) def download(self, *args, **kwargs): instance = self.get_o ...

pythondjangoangulardjango-rest-framework

Update Table Row Background Color in Separate Table by Clicking Button Using JQuery

Two tables are involved in this scenario - one that receives dynamically added rows, and another that stores the data to be included. The illustration above displays these tables. Upon clicking the Edit button, the information from the selected row in Tab ...

javascriptjquerycssasp.net

Having trouble with Heroku deployment? Unsure of the correct way to deploy your Angular App + NodeJs?

Here's a recent log using heroku logs --tail I'm facing some issues and not sure what's wrong :( 2019-07-23T14:46:07.163085+00:00 app[api]: Release v1 created by user ************************* 2019-07-23T14:46:07.163085+00:00 app[api]: Ini ...

node.jsangularherokumean-stackweb-deployment

When launched from a push notification, the application closes upon pressing the system's back button

There seems to be an issue with the title, as it only occurs if I click anywhere on the screen beforehand. It appears that the application is not active before the click, causing the registered back button action to not work. The code for the action is as ...

androidangularcordovaionic3

Designing Progress Bars with CSS3

I'm currently working on enhancing the appearance of the progress bars across my website, all of which are built using jQuery UI. My goal is to achieve a design similar to the one shown below (featuring a stylish bevel effect and a visually appealing ...

css

Improving validation in Angular reactive forms by adding custom validation onBlur

I am struggling to correctly implement the OnBlur syntax for my project. export class AppComponent { form: FormGroup; constructor(private fb: FormBuilder) { this.form = this.fb.group({ published: true, credentials: this.fb.array([]), ...

angular

Issue with Angular $compile directive failing to update DOM element

I'm currently working on a project that involves integrating AngularJS and D3 to create an application where users can draw, drag, and resize shapes. I've been trying to use angular binding to update the attributes and avoid manual DOM updates, b ...

javascriptangularjsd3.jsangularjs-directive

The OnPrepareResponse method in StaticFileOptions does not trigger when serving the index.html file

Currently, I am attempting to disable caching for index.html in my Angular SPA that is connected to a .NET Core 2.2 backend. I am following the instructions provided in this particular answer by implementing an OnPrepareResponse action for my StaticFileOp ...

c#node.jsangulartypescriptasp.net-core

Encountering MIME type error (text/html) during Angular project deployment

I am facing an issue while trying to deploy a project built with Angular/CLI 6.12.0. After transferring the content of the "dist" folder to a server, I encountered a console error related to MIME type. The module at address "http://www.sylvainallain.fr/p ...

javascriptangulardeploymentbuildmime-types