Adjusting the alignment of button text in an Angular Kendo grid

I am currently utilizing the grid view feature of Kendo UI for Angular. While I have buttons on the grid, the issue is that the text within the buttons is not centered properly despite applying styles such as text-align:center. Here is the template for my button:

<kendo-grid-command-column title="SPO Item Count" width="120">
    <ng-template kendoGridCellTemplate let-dataItem>
        <button pButton type="button"
            style="margin-bottom:10px;margin-right:10px; width: 100px; text-align:center" (click)="onEditCostClick(dataItem);"
            class="p-mr-2 p-mb-2 p-ripple p-button p-component">
                {{dataItem.spoItemCount}}
        </button>
    </ng-template>
</kendo-grid-command-column>

When previewed in the browser, this is the alignment outcome:

https://i.sstatic.net/1vkeM.png

cssangularkendo-ui

Answer №1

<kendo-grid-command-column title="Custom Item Count" width="120">
                                            <ng-template kendoGridCellTemplate let-dataItem>
                                                <button pButton type="button"
                                                        style="margin-bottom:10px;margin-right:10px; width: 100px; display:flex; justify-content:center; align-items:center;" (click)="onCustomEditClick(dataItem);"
                                                        class="p-mr-2 p-mb-2 p-ripple p-button p-component">
                                                    {{dataItem.customItemCount}}
                                                </button>
                                            </ng-template>
                                        </kendo-grid-command-column>

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 using a typescript subscription to collect data from an API, the information is stored in an array. However, only one piece of data can be

I have implemented a method to fetch data from an API using Angular: ngAfterViewInit() { this.exampleDatabase = new ExampleHttpDatabase(this._httpClient); var href = '/schuhe-store/status'; if (environment.production === false) { href ...

angulartypescriptrxjs

Display elements exclusively when the class XY is in an active state using JavaScript

Hello everyone, I'm new to this platform and excited to share my first post. Currently, I find myself facing a major challenge as I navigate through a bootcamp program. I have been working on a website with different sections that require specific fu ...

javascripthtmlcss

The necessity of using Adobe Photoshop for optimizing a Web Template

My interest lies in utilizing web templates, such as the one referenced here:- templete However, within its details tab, it specifies that the following software is required:- Adobe Photoshop CS+ Sublime Text2 or later, Notepad++, Dreamweaver CS5.5+(Co ...

htmlcssdreamweaverphotoshop

It is imperative that the 'Access-Control-Allow-Origin' header value in the response is not set to '*' when the request's credentials mode is 'include'

I am currently working on establishing a connection using socket.io between Angular and a Node.js Server Within Angular, I have set up a new socket by importing socket.io-client and connecting it as follows: import * as io from 'socket.io-client& ...

javascriptnode.jsangularsocket.iocors

The positioning attribute and flexible height in CSS are essential for creating dynamic

My goal is to create a layout with 3 DIVs inside a container, similar to table rows. top {height = 100px} / middle {height = dynamic} / bottom {height = 100px} I am trying to figure out the best approach to make the height of the middle div dynamic whi ...

cssposition

Addressing see-through box styling in CSS

When working on a website using HTML and CSS, I encountered an issue with a transparent box. All elements within this box are also transparent, but I want them to be solid without any opacity. How can I resolve this? .parent { display: inline-block; ...

htmlcssdjangoopacity

An easy way to insert a horizontal line between your text

Currently, I have two text responses from my backend and I'm considering how to format them as shown in the design below. Is it possible to automatically add a horizontal line to separate the texts if there are two or more broadcasts instead of displa ...

javascripthtmlangulartypescriptangular-material

Adjustments to the positioning of masonry columns

Hello everyone, I'm in need of some assistance with editing this code. My goal is to make the effect clickable rather than activated by hovering. You can view the current code snippet here. Here is the existing code: $container.find('.shifty-i ...

jquerycss

Tips for adjusting the language settings on a date picker

Is there a way to change the language from English to French when selecting a month? I believe I need to configure something in the core.module.ts. How can I achieve this? https://i.sstatic.net/Cpl08.png @NgModule({ declarations: [], imports: [ Co ...

javascriptangulartypescriptdatepickerngx-bootstrap

Why do variables in an HTML file fail to update after being navigated within onAuthStateChanged?

Currently, I am working with Ionic 5 and Firebase. Everything is running smoothly until I implemented the onAuthStateChanged function to persist login for authenticated users. Here is the code snippet: this.ngFireAuth.onAuthStateChanged((user) => { ...

angulartypescriptfirebaseionic-frameworkfirebase-authentication

Tips for adjusting this CSS to be compatible with Internet Explorer

This CSS code I have was created specifically for Firefox compatibility. /* Green header */ .container { background: linear-gradient(#5FA309, #3B8018); position: relative; display: inline-block; padding: 0 20px 0 10px; width: 270px; ...

css

ngOnChange event not firing despite attempting various solutions

My goal is to utilize ngOnChanges to update a string (even or odd) after another variable (counter) changes. However, I am encountering an issue where the value of the message remains blank and does not update when the counter changes. export class Counter ...

angular

Implementing interactive dropdown menus to trigger specific actions

I have modified some code I found in a tutorial on creating hoverable dropdowns from W3. Instead of the default behavior where clicking on a link takes you to another page, I want to pass a value to a function when a user clicks. Below is a snippet of the ...

javascripthtmlangular

What is the best way to retrieve the outcome from the ngbModal component?

I'm seeking assistance with retrieving results from the ngbModal component. I trigger the modal with a link. <a class="order-collection-options-link" (click)="openTimePicker()">{{'ORDER_COLLECTION_OPTIONS_LABEL' | dict}}</a> ...

angularbootstrap-4ng-bootstrap

What is the best way to incorporate a routerLink in an HTML string?

For my app, I need to display a long piece of text using HTML strings. Here is an example: // component description: string = `<p>Hello world. <a routerLink="/home">Click here</a> to go to the home page.</p>`; // template <div ...

angular

Testing a function in Angular using Karma and Jasmine

I am facing an issue while testing a method in Angular using Jasmine/Karma. The error message I keep encountering is: TypeError: undefined is not iterable (cannot read property Symbol (Symbol.iterator)) This is how I created the method: myMethod(l ...

angulartypescriptunit-testingjasminekarma-jasmine

Borders in my CSS/HTML table design

Hey, I'm currently facing an issue with my class project. I've created a table with a series of images to form a background image. However, there are borders on the table that I need to adjust. Here is the current look: I am trying to have a sq ...

htmlcss

Changing the Background Color of the Toolbar in Ionic

I am having trouble making the background color of my footer dynamic. I have tried binding the element to a class or applying dynamic styling, but it doesn't seem to work. Even when I have this in my HTML: <ion-footer align="center" style="height: ...

cssionic2

Struggling with the Nivo slider not loading properly?

Check out my personal website. I'm having an issue with my Nivo slider not displaying properly - it just keeps loading. Any ideas on why this is happening and how I can fix it? Below is the CSS I am using: #slider { position:relative; width: ...

javascripthtmlcssnivo-slider

Issue arises when applying both overflow-x:scroll and justify-content:center

Encountering a problem with using overflow-x: scroll and justify-content: center on a flex parent container. Here is my code snippet: The issue: the first flex child item is not visible as it is cropped on the left side. Please refer to the screenshot and ...

htmlcssflexbox