Is there a way to prevent the text next to these FontAwesome icons from moving whenever the icon itself changes?

I am currently working on creating a unique custom checkmark using FontAwesome in my project.

Below is the snippet of HTML and CSS style code that I am using:

.check {
    font-size: 1.25rem;
    cursor: pointer;
}

.check-unselected {
    color: #4E444B
}
<div class="d-flex">
  <i *ngIf="selected" (click)="selected = false;" class="fa fa-check-square purple-1 check"></i>
  <i *ngIf="!selected" (click)="selected = true;" class="fa fa-square-o purple-1 check check-unselected"></i> &nbsp;{{ label }}
</div>

Currently, when I select and unselect the checkmark, the text moves slightly. It shifts to the right when selected and back to its original position when unselected. I am looking for a solution to keep the text static without any movement. Any suggestions on how to achieve this?

EDIT: The "purple-1" mentioned is only a color property and does not affect the size.

htmlcssangular

Answer №1

To maintain equal spacing between the icons and the text, enclose the icons in a parent element with a fixed width. Consider moving the click event handling to the parent element for easier management.

<div class="d-flex">
    <div style="width:50px; text-align:center;"><i class="fa fa-check-square purple-1 check"></i></div>
    <div style="width:50px; text-align:center;"><i class="fa fa-square-o purple-1 check check-unselected"></i></div> &nbsp;{{ label }}
</div>

For centered alignment of the icons, utilize text-align:center;. This will ensure that both icons are center-aligned.

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

When calling a function within a for loop, the function receives the final value instead of iterating through the sequence

I need assistance with setting unique names for objects in an array. I have the following setup: this.array = [{name: null}, {name: null}, {name: null}] Along with a list of reserved names: this.reserved = ["name2", "name3"] My goal is to loop through th ...

javascriptangular

Obtaining data from a hyperlink's attribute within HTML

I have a question that builds upon my previous inquiry: Finding the text of an href tag from an HTML file My current query involves extracting the number within seekVideo(number). For instance: <a href="#" class="transcriptLink" onclick="seekVideo(200 ...

iphonehtmlxml

Implement a customized toString method for components in ReactJS

Looking to modify the toString method of a class component in reactjs? Check out the code snippet below class C1 extends React.Component{ render(){ return ( <div> {C2.toString()} </div> ) } } class C2 extend ...

javascripthtmlreactjsweb

What is the best way to emphasize a certain row within XSLT?

I am seeking a solution to emphasize rows containing the "year" element with a value exceeding "2000" in XML and XSLT. Here is the code snippet: XML <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="harrypotterbooks. ...

htmlcssxmlxslt

Adaptable data table featuring varying sizes of columns and rows

I'm attempting to design a grid that resembles the following: https://i.sstatic.net/Sf7M9.png The challenge I'm facing is how to ensure that the column and row names adjust properly with the grid in the center. Currently, this is the code I hav ...

htmlcssresponsiveness

Explanation on How to utilize the $( document ).ready() jQuery function within the ngAfterViewInit() on a Component class using Angular 2

This is the code snippet: constructor(private el: ElementRef) { } ngAfterViewInit() { this.loadScript('app/homepage/template-scripts.js'); } ...

angulartypescriptangular2-directivesangular-components

What are the steps to get an Icon to intersect with a v-app-component in a Vuetify project?

The locket is not overlapping with the v-app-bar. How do I make sure they intersect? <template> <v-app-bar :elevation="2" rounded> <v-row class="z-index"> <v-col cols="12" class="d-flex flex-column justify-center align ...

htmlcssvue.jsvuetifyjs3

Using Angular 4 Component to Invoke JavaScript/jQuery Code From an External File

I have written a jQuery code that is executed at ngAfterViewInit(). //myComponent.ts ngAfterViewInit() { $(function () { $('#myElement').click(function (e) { //the code works fine here }); } However, I want t ...

javascriptjqueryangulartypescript

Surprising outcomes when hosting my website on its domain

During the development of my website, I uploaded it to Cpanel once everything was finished. It functioned perfectly fine at that time. However, after making some changes and uploading it again, the fonts and videos on the live domain appear larger than i ...

htmlcsscpanel

Dimming the background of my page as the Loader makes its grand entrance

Currently, I am in the process of developing a filtering system for my content. The setup involves displaying a loader in the center of the screen whenever a filter option is clicked, followed by sorting and displaying the results using JQuery. I have a v ...

javascriptjquerycssajaxhtml

Navigating within Custom Web Component Angular

Recently, I attempted to create a custom web component using Angular ngDoBootstrap() { const el = createCustomElement(ServicemainComponent, { injector:this.injector }); customElements.define('servicemain', el); } After building the component in ...

angularrouterweb-component

Concealed upper TD boundary in IE 8

I've been struggling all day to figure out this style issue without any success. http://jsfiddle.net/9HP9Q/1/ The table lines should have gray borders around them. It's working fine on all browsers except Internet Explorer 8. .order_table tab ...

htmlcsshtml-tableinternet-explorer-8border

Utilizing CSS flex-end to position images

I am facing an issue with aligning the last item in my container named section-a. The height of the container is set to 100vh and it contains 3 items. I have tried using the property align-self:flex-end, but there are no visible changes. Can anyone help me ...

htmlcssflexbox

Angular Material Datatables - Issue with Paginating Data from Firestore

Data has been retrieved from Firestore and transformed into an Observable array with the InvoiceItem type. The data loads correctly onto the datatable, but there seems to be an issue initializing the paginator with the array's length. This could poss ...

angulartypescriptasynchronousdatatablegoogle-cloud-firestore

Adjust the column count in mat-grid-list upon the initial loading of the component

My goal is to implement a mat-grid-list of images with a dynamic number of columns based on the screen size. Everything works perfectly except for one small glitch – when the grid first loads, it defaults to 3 columns regardless of the screen size until ...

javascriptcssangulartypescriptangular-material

Guide on updating a MongoDB document upon clicking a button on an HTML page

I'm new to backend development and I've been working on creating a CRUD notes application without using React or EJS. My current issue is that I am unable to edit documents. The desired functionality is for the user to be directed to a page wher ...

javascripthtmlnode.jsexpressmongoose

Adjust the viewport to fit the width of the screen and display large images

Currently, I am experimenting with using a WebView to display a large image while incorporating multitouch functionality to prevent memory crashes. My webView is configured as follows: setInitialScale(20); WebSettings settings = getSettings(); ...

javaandroidhtmlwebview

What is the best way to horizontally align a floated image with its text positioned at the bottom?

I centered the images inside the "main-content" class, but I'm unsure if I did it correctly. Now, I also want to center the text, but using margin affects the images as well. Apologies for the messy code, I'm just a beginner. Below is the HTML5 ...

htmlcss

Utilizing AJAX to showcase individual PHP files

My PHP elements are not being displayed in the code, and I need to figure out why. Below is the HTML code I am currently using: <div class="tablocation"> <ul class="css-tabs"> <li><a class="current" href="/wp-content/themes ...

phpjqueryhtmlajax

Establish a connection to a regular socket by utilizing WebSocket technology

I am attempting to connect a client interface to a hardware device using WebSocket in a browser like Chrome. The code snippet I have been using for connection is as follows: var ws = new WebSocket("ws://127.0.0.1:13854"); ws.onopen = function() ... Howev ...

javascripthtmlgoogle-chromewebsocket