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

Advantages of passing individual variables instead of the entire object from HTML to JavaScript in AngularJS

When it comes to passing the iterating object from HTML to Javascript, there are two approaches that can be taken. The first approach involves passing the iterating object as a whole, while the second approach only passes the required properties of the obj ...

javascripthtmlarraysangularfor-loop

Can you explain the mechanics behind the animation of the upvote button on steemit.com?

Behold the upvote button of steemit.com: <span class="Icon chevron-up-circle" style="display: inline-block; width: 1.12rem; height: 1.12rem;"> <svg enable-background="new 0 0 33 33" version="1.1" viewBox="0 0 33 33" xml:space="preserve" xmlns=" ...

javascripthtmlcssanimationsvg

What is the reason behind Angular FormControl applying the 'disabled' attribute in the DOM but not the 'required' attribute?

After transitioning my form logic from the template to FormGroup & FormControl objects, I noticed that when a FormControl is disabled in Angular, the 'disabled' attribute for the field is automatically updated in the DOM. However, when I modi ...

angularangular-material2angular4-forms

Hierarchy in CSS: The battle between author and user styling

Following a hierarchy of precedence: User agent declarations User normal declarations Author normal declarations Author important declarations User important declarations The CSS specification distinguishes between author and user: Author. The author s ...

css

Retrieve the attribute from the element that is in the active state

I'm facing a challenge in determining the active status of an element attribute. I attempted the following approach, but it incorrectly returned false even though the element had the attribute in an active state - (.c-banner.active is present) During ...

javascriptangulartypescript

React Div Element Not Extending to Web Page Margin

creating white space between the green div and both the top and sides of the screen This is my index page export default function Home() { return( <div className = {stylesMain.bodyDiv}> <div>home</div> &l ...

htmlcssreactjsreact-nativeweb-testing

Place the element at the bottom of the row above

I'm utilizing Angular to retrieve a list of items from the server and exhibit them on the page using: <div class="col-sm-6 col-md-4" ng-repeat="activity in activities"> <img ng-src="[[ act.icon ]]" height="100" alt=""> <h3>[ ...

htmlcssangularjs

Modal for Firestore CRUD operations update()

Currently seeking assistance with a CRUD system that involves modal dialogues. I have successfully implemented adding and deleting functionalities, but I am encountering an issue with editing. Although I can retrieve the data for each record in its respect ...

angularfirebaseangular-material2angularfire2google-cloud-firestore

The most effective way to align text in a right-to-left language is by utilizing the text-align property with a

If the project is in a right-to-left language (such as Persian or Arabic), which method is preferable for setting text-align: right and direction: rtl? Option 1: Implement globally, for example: body * { direction: rtl; text-align: right; } ...

css

The height of the footer element is gradually dwindling

Have you ever wondered why a footer element mysteriously shrinks in height when the browser window is resized? I attempted to create a fiddle with my code, but unfortunately, it's not replicable on JSFiddle so I won't be sharing it. This is how ...

htmlcss

What kind of GWT component features both a Button and text?

I am looking to develop a customized GWT widget that consists of a rectangular div element resembling a button, accompanied by text positioned adjacent to it. My goal is to enable the selection of this widget so that clicking on either the div/button or th ...

javacssbuttongwtlabel

Change the API endpoint for webpack in production

In my Angular 4 project, I am utilizing webpack to manage the API url. However, for production, I need to specify a different API url. Can anyone guide me on where exactly I should input the new url in my jhipster project? Source: webpack.prod.js : ...

angularwebpack

Is there a way to modify the background color with Bootstrap?

While following a Bootstrap tutorial, I stumbled upon an issue that I can't seem to resolve. In my layout, I have an article and a sidebar in a row, with the article taking up 9 columns and the sidebar taking up 3 columns. The background color of the ...

htmlcsstwitter-bootstrap

What is the process for obtaining the Angular.json file for my NX Workspace?

Looking to develop a fresh Angular web application within my NX Workspace, with plans to eventually convert it for iOS and Android using Capacitor. After setting up the nx monorepo, I proceeded to generate a new Angular application by running the command ...

angularnpmweb-applicationssetup-project

Widget being affected by centering CSS styling

My CSS centering code seems to be causing an issue with a widget, as it gets pushed down below the columns. Additionally, the nav bar widget appears on all forum pages. Your assistance in resolving this problem would be greatly appreciated. Thank you. Ch ...

htmlcss

Do you know the term for when JavaScript is utilized to display specific sections of a png image?

Imagine you have an image file in the format of a PNG which includes various icons intended for use on a website. How can JavaScript be utilized to choose and showcase a specific icon from that image? It's a technique I've observed in practice, b ...

javascriptcssiconspngcss-sprites

Exclusive to Firefox: The left and right arrows will shift the entire page

I've encountered a strange issue with my website that only seems to be occurring in Firefox. When using the mouse scroll, I am able to move up and down as expected. However, when using the arrow keys, the entire page shifts to the right in approximate ...

htmlcssfirefoxweb

Tips on making a progress bar with a reverse text color for the "completed" section

I've been tackling this issue for hours, but haven't found a working solution yet. The challenge is to create a progress bar with a dynamic width and a centered label that changes its text color between the progressed and unprogressed parts. Here ...

htmlcss

The transition property in CSS and JavaScript does not seem to be functioning properly in Firefox

Recently, I integrated a Slide in menu script on my website using a Slide in menu script. After following all the instructions provided, the menu started working flawlessly on Chrome and Safari browsers. However, my main goal was to make it function on Fir ...

javascripthtmlcss

Angular design featuring numerical staircase pattern

I'm attempting to implement a numeric version of the staircase pattern using Angular, but I have yet to find the solution. Here is the desired outcome: Below is the code I have developed thus far: main.ts import { Component, Input, OnInit } from &ap ...

angular