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:

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 a textarea contains a new line, it will automatically add an additional row and expand the size of the textarea

Developed a form with the functionality to move placeholders in a textarea upwards when clicked. The goal is to increment the height of the textarea by 1 row for every line break. However, I am uncertain about what to include in the if statement of my Ja ...

javascriptjqueryhtmlcss

list without specific order spacing

I have implemented an unordered list in the footer section of my HTML document. Within this list, the first two items consist of social media logos displayed as images. To enhance their visibility and prominence within the footer, I have assigned them a wh ...

htmlcsspaddingmarginhtml-lists

Passing events between sibling components in Angular 2Incorporating event emission in

Having some trouble emitting an event from one component to another sibling component. I've attempted using @Output, but it seems to only emit the event to the parent component. Any suggestions? ...

javascriptangularjsangularangular2-directives

How to Overlay a Semi-Transparent Object on a Background Video using CSS and HTML

Hey there, I'm encountering a puzzling issue with my website. I have a background video set up, and I wanted to overlay a floating textbox on top of it. However, no matter what I do, the background color and borders of the textbox seem to be hiding be ...

htmlcss

The panning functionality on Android devices within the Firefox browser is currently experiencing issues with both panstart and pan

Currently, I am collaborating on an Angular7 project and utilizing hammerjs version 2.0.1. One of the tasks at hand is to allow panning functionality on a map for mobile devices. After testing on various android devices, I noticed that it performs well on ...

angulartypescripthammer.js

If the SASS condition matches the variable for the background color, then

I attempted to create a conditional statement in my component using Sass @if and @else. The condition I set was that if background == var(--bg-danger), the color should be white. However, it only returned white and did not trigger the else condition. @mixi ...

cssvue.jssass

Incorrect Media Queries breaking LayoutNote: This is a completely unique rewrite

My golden rule for media queries is set... @media only screen and (min-width: 768px) and (max-width: 1080px) { Strangely, I picked 1080 as a test number... Unexpectedly, the background color changes at 1190px when resizing my page to test breakpoints. ...

htmlcssmedia-queries

retrieve all the table data cells except for the initial one

I have a specific table structure that I need to work with: <table> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td&g ...

htmlcss

Windows and MacOS each use unique methods for displaying linear gradients

Check out this code snippet featuring a background gradient background: rgba(0,0,0,0) linear-gradient(rgb(245, 245, 245),rgba(0,0,0,0)) repeat scroll 0 0; This code renders correctly on Windows (chrome, ie, firefox) https://i.stack.imgur.com/XU2gW ...

htmlcsswindowsmacos

Troubles with Borders and Padding in HTML Elements

Hello everyone, I'm currently facing an issue trying to neatly fit a textbox, select menu, and button all within the same sized div. Each element seems to have strange borders/margins causing them not to display properly (the button ends up below the ...

htmlcss

Using React Native's stylesheet to apply multiple values in a CSS statement

Here's a scenario to help clarify my question: Imagine I want to add margin to an element in the following way: const myView = () => <View style={styles.viewStyle}></View> const styles = StyleSheet.create({ viewStyle: { margin: ...

javascriptcssreactjsreact-native

Why is it that Lotus Notes is unable to render this HTML code properly?

I am having trouble with an email that displays properly on every platform except Lotus Notes. Can anyone provide insight as to why this email is not rendering correctly in Notes? Here is a screenshot: img (please note the images are for demonstration pu ...

htmlcsshtml-tablehtml-emaillotus-notes

Obtaining attribute data value upon selection change in Angular 4

Having trouble retrieving the value from data-somedata in my code... <select class="form-control input-sm" [(ngModel)]="o.id" formControlName="optionals" (change)="menuChange($event)"> <option *ngFor="let menu_optional of menu_optionals" value= ...

angulartypescript

The issue of drop shadows causing links to not work properly in Internet Explorer

I am currently working on a website design that features a fixed menu positioned behind the body. When the menu icon is clicked, some jQuery code shifts the body to the left. To create the effect of the fixed menu being positioned underneath, I have added ...

javascriptcssinternet-explorer

Learning how to use RestSharp's POST method in C# to send JSON data

Currently, I am in the process of testing a REST API using RestSharp. To post data and receive status (error, invalid, success) based on callback, I need to use the POST method. However, I am encountering an INVALID response with the message "Object refere ...

c#angularrestsharp

Unable to input text in an Angular2 input field

Encountering an issue with users on Windows 7 using IE11 while trying to input information into textboxes or textareas. The drop-downs and checkboxes are functioning properly, but additional fields cannot be filled out even after toggling visibility with t ...

windowsangularinternet-explorer

Switching the position to fixed causes it to lose its justification functionality

My goal is to create a table using div elements. However, when I set the header to have a fixed position to prevent it from disappearing when scrolling through more data, all the header cells shift to the right. I attempted to adjust the margin-left proper ...

htmlcss

There seems to be no clear reason as to why the Angular Service is showing

In my DataService component, I have defined two methods - one to read from a file using the cordova-file-plugin and the other to write to it. Initially, it was using the in-mem-web-api, which worked perfectly fine. However, I made some changes to switch th ...

angularcordova

Creating a unique syntax for custom ngIf directives in Angular

Currently, I am in the process of developing a personalized *ngIf directive that will swap out content with a placeholder during loading. After referencing the *ngIf directive (https://github.com/angular/angular/blob/master/packages/common/src/directives/n ...

angularangular2-directivesangular-directive

Utilizing the power of Vue 2 and NuxtJS to effortlessly customize the appearance of child components

I am currently working on a Nuxt.js project (still using Vue 2) that consists of two components. I am trying to override the child style with the parent's style, but the ::v-deep pseudo selector doesn't seem to be effective. Regardless of my eff ...

javascriptcssvue.jssassnuxt.js