Having trouble centering an icon in a cell within AG Grid?

I am struggling with aligning my checkmarks within the cells of my AG Grid. Currently, they are all left aligned but I need them to be centered. Adjusting the alignment for text is not an issue, but I can't seem to center the material icons. It appears that part of the problem may be due to the span element holding the image having its alignment set to center, which does not impact the column itself.

https://i.stack.imgur.com/MnJeM.png

Below is a snippet of the code for the cell:

<span class="ag-cell-value" role="presentation" id="cell-112"><span>
<span class="table-row-icon" style="align-items: center;">
    <i class="material-icons md-18" style="color: #ff6358;
        align-items:center;text-align:center;">done</i>
</span></span></span>
cssangularag-grid

Answer №1

After some troubleshooting, I discovered that setting the display property to Flex would solve the issue. By using the following CSS style, I was able to achieve the desired outcome.

{display: flex; justify-content center}

https://i.stack.imgur.com/WvHgt.png

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

How can you extract the text content within component tags that is neither a component nor an HTML tag?

For illustration purposes, consider the following example: var ItemComponent = ng.core.Component({ selector: "item", inputs: ["title"], template: "<li>{{title}} | <ng-content></ng-content></li>", }).Class({ construc ...

angularangular2-template

Having trouble getting combineLatest to properly normalize data in Angular using RxJS

Difficulty arose when attempting to normalize data prior to merging it into a new stream, resulting in no changes. I need to verify whether the user has liked the post using a Promise function before including it in the Posts Observable. this.data$ = comb ...

angularasynchronousrxjs

Struggling to properly position navigation bar items in a Bootstrap website

I'm struggling to align the bar items on a new site that I've built. I've tried placing two bars at the top to mimic the layout of this site: . I'd like it to look similar to this site: , where everything is nicely centered and mobile-f ...

htmlcssbootstrap-5

Changing the child component input in Angular's deep cloning cannot be reflected on the user interface

I am currently working on a parent-child component setup. Within the parent component, I have a BehaviourSubject<SomeObject[]>(). export interface SomeObject(){ field: number; ... editable: boolean } Before passing the object to the child component, ...

angulartypescriptrxjsangular-materialngrx

Is there a way to integrate a calendar feature within an Angular 2 application?

I am brand new to Angular 2 and have a question: I need to integrate a calendar into a page where users can add events. Something similar to the following example: I'm unsure if the angular material calendar project is designed for Angular 2 or for ...

javascriptangularjavascript-framework

Issue with NPM installation of node module

My angular project includes a package.json file with all the necessary dependencies listed. However, whenever I run "npm install" in the terminal, the packages seem to download correctly and a node module folder is created in my root directory. Strangely ...

node.jsangularnpm

Send visitors without a specified path to a designated component

After struggling to find a solution for redirecting an empty path to a component, I have browsed through several questions but none of the solutions seem to work. My goal is to redirect a user to a specific component when they hit a URL for the first time ...

angularangular-routingangular-routerangular-router-guards

Swapping icons in a foreach loop with Bootstrap 4: What's the most effective approach?

I need a way to switch the icons fa fa-plus with fa fa-minus individually while using collapse in my code, without having all of the icons toggle at once within a foreach loop. Check out a demonstration of my code below: <link rel="stylesheet" href= ...

javascriptphphtmlcssbootstrap-4

Unable to pass parameters through the URL in Angular's POST request

Hey there! I'm currently facing an issue with passing a parameter in the POST method URL within an Angular service to construct a URL for fetching data from an API. However, when I try calling it in the component file, I keep getting an error response ...

angularangular-httpclienthttp-parameters

Ngrx: When using CatchError, it does not trigger a dispatch of an action

Dealing with catchError in the latest version of ngrx. effect$ = createEffect(() => this.actions$.pipe( ofType(contactAction), switchMap(({ data }) => this.postService.contact(data).pipe( map(() =& ...

angularactionngrxeffects

Using Angular 2 to toggle visibility based on a select box's value

<div class="form-group"> <label class="col-md-4 control-label" for="is_present">Is Present?</label> <div class="col-md-4"> <select id="is_present" name="is_present" class="form-control" *ngIf="candidates.is_present === tr ...

htmlangular

Embed a unique custom design sheet within a Facebook iframe

I'm looking to customize the design of my Facebook feed by adding a custom style sheet inside a Facebook iframe. Here's what I have: <iframe width="1000px" height="1000px" frameborder="0" name="f1e348592ed856c" allowtransparency="true" allo ...

jqueryhtmlcssfacebookiframe

CSS drop down menu malfunctioning

Trying my hand at anchor tags and drop down menu. I'm encountering an issue in the code below - the dropdown doesn't seem to be working as intended. It should display the text "This is dropdown menu" directly beneath the text "This is text. Its i ...

htmlcss

Align the center of a grid div that does not contain any items

Below are the code snippets provided: .grades_dashboard_m {} .three_separation { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 60px; } .grades_dashboard_box { height: 130px; width: 160px; background-color: #00 ...

htmlcsscentercss-grid

What is the best way to maintain the highlighting of a clicked navigation button in CSS?

.custom-highlight { display: inline; font-weight: 500; font-size: 15px; } .item-list { border: 1px solid #b1b8c9; color: $color-grey-light; font-size: 14px; display: inline-block; margin-right: 8px; padding: 5px 20px; border-radius: 4p ...

htmlcssvue.jsbootstrap-4

The Observable merge operation encountered an error: it cannot access the 'apply' property of an undefined value

I am currently working on setting up a sorted DataTable in an angular application, and while implementing it using this example, I encountered the following error: ERROR TypeError: Cannot read property 'apply' of undefined at TableDataSource ...

angulartypescriptrxjsobservable

Can a linked checkbox be created?

Is it possible to create a switch type button that automatically redirects to a webpage when turned on by clicking a checkbox? I'm working on implementing this feature and would like to know if it's feasible. ...

javascripthtmlcss

Ionic: Fixed button located at the bottom of a specific ion-slide

I've been creating a series of slides with questions, and the final slide serves as a summary of the previously answered questions. I want to ensure that the submit button is always visible at the bottom of this last slide. However, I've encounte ...

cssangulartypescriptionic-frameworkionic4

Arranging items in a vertical column using CSS based on the content

I am facing an issue with aligning the values in a column under each other without percentages using my own html code, css, and bootstrap classes: <div class="d-flex"> <p class="table-string">91.86</p> <span ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-5

Create a custom navigation system for ng-bootstrap tabset using manual controls

Currently, when I click on the "Client" tab, the content opens. Similarly, when I click on the "Rate card" tab, the rate card content opens. However, the navigation does not work when I use the arrows at the bottom. How can I enable navigation for the ar ...

angularng-bootstrap