How to center text in MatButtonToggle within angular material?

I'm facing a challenge in customizing the MatButtonToggle as I am having issues with centering the label:

https://i.sstatic.net/LVzrm.png

Here is the template for reference: 

<mat-button-toggle-group name="condition" aria-label="Condition">
  <mat-button-toggle value="and" checked>
    <div>ET</div>
  </mat-button-toggle>
  <mat-button-toggle value="or">OU</mat-button-toggle>
</mat-button-toggle-group>

Below are the style settings being used: 

.mat-button-toggle-checked {
  background-color: $secondary-color;
  color: white;
}

mat-button-toggle-group {
  height: 25px;
  border-radius: 4px;
  border: solid 1px $secondary-color;
}

mat-button-toggle {
  font-size: 15px;
  background-color: white;
  color: $secondary-color;
}

If you have any suggestions on how to resolve this issue, please let me know. Thank you!

cssangulartypescriptsassangular-material

Answer №1

include the following code snippet:

.mat-button-toggle-label-content{
  line-height: 0px !important;
  padding: 12px 10px 10px 10px !important
}

into your styles.css file located in the src folder of your project.

Additionally, make sure to remove the unnecessary <div> from your HTML code:

<mat-button-toggle-group name="condition" aria-label="Condition">
  <mat-button-toggle value="and" checked>AND</mat-button-toggle>
  <mat-button-toggle value="or">OR</mat-button-toggle>
</mat-button-toggle-group>

Click here to see a DEMO

Answer №2

Consider utilizing ng-deep in this scenario.

::ng-deep .mat-button-toggle-label-content{
  line-height: 0px;
  padding: 12px 10px 10px 10px;
}

Relying heavily on the !important flag is never a recommended approach and is generally considered a "bad practice".

There is currently just a proposal on how to replace ng-deep, more details can be found here.

UPDATE

An alternative method could be creating a universal CSS file with specific styles for your particular use case and integrating it into your styles.css. This way, you can avoid using ng-deep and the !important flag. However, caution should be taken as it may impact other elements.

Additional insights on this topic can be explored here

Answer №3

The reason the label isn't centered has nothing to do with padding; rather, it's due to the button's height.

To fix this issue, simply insert the following lines into your style.css file:

.mat-button-toggle-button {
    height: 100% !important;
}

No need for concern - these changes will only impact the specific mat-button-toggle you're working on.

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

Turn off Highlighting on a Website

I conducted an experiment similar to this: <div onclick="clickfunc(this)"> highlightME </div> <div> ooo blablabla highlightME ooo highlightME ooo highlightME ooo</div> <script language=javascript> function clickfunc(obj ...

javascripthtmlcss

Discover the process of verifying identical credentials in WordPress and Node.js

Wondering how to enable users to login to a WordPress site using the same credentials as an Angular/Node site? We aim to provide a seamless experience where users don't have to create a new account on WordPress. Looking for suggestions on implementing ...

node.jswordpressangular

Tips for adjusting your Navbar from transparent to solid based on screen size changes instead of scrolling

I am seeking assistance in creating a responsive Navbar that transitions from transparent to solid when the screen size changes, such as on a smartphone. I want the Navbar to remain fixed at the top of the page and not move down as I scroll. I tried adding ...

htmlcssbootstrap-4

How to make a specific table row stand out using AngularJS and CSS

Can you provide advice on how to highlight a specific row in a table? I have a table along with some angular code snippets. Here's an example: angular.module('myApp', []).controller('myTest', function($scope) { var data = []; ...

javascripthtmlcssangularjs

SVG images are not perfectly aligned with surrounding elements, causing a noticeable discrepancy, which becomes even more pronounced when they are being animated

I've been experimenting with creating animated 3-D bars in a bar graph. To ensure there are no issues with stretching or aspect ratio, I decided to split each bar into three parts: (1) an SVG for the top of the bar, (2) a div with adjustable height fo ...

cssreactjssvgcss-animationsstyled-components

The functionality of Change Detection is inconsistent when data is being received from the Electron Container IPC Channel

I have a program that is waiting for incoming information from an IPC Renderer Channel. Here is how I have it set up: container sending data to Angular app (mainWindow): mainWindow.loadURL('http://www.myangularapp.com') //location of the angul ...

javascriptangularelectronipcangular2-changedetection

Using jQuery to animate the opacity to 0 and then smoothly fade out the element

I am currently working on a function that animates the opacity of an element to 0 as the user scrolls. However, I am facing an issue where the element is fading out too early instead of waiting for the animation to finish. Here is a link to my jsFiddle sho ...

javascriptjqueryhtmlcss

What kinds of data files are recommended for use with Protractor?

What is the most effective method for managing data from a data file in Protractor scripts? If my goal is to store all test data (such as login credentials, user input values) in a distinct data file, what type of file should I utilize and how can I prope ...

jsontypescriptprotractor

Struggling to maintain the footer at the bottom of the page

I've been working hard to implement the tips from a tutorial on keeping the footer at the bottom of the page, especially when there isn't much content. The link to the tutorial can be found here: Despite following all the guidelines and properti ...

htmlcssfooter

Position the navbar as an overlay when expanding, instead of pushing down the page contents

Is there a way in bootstrap 4.0 to have the navbar overlaying the contents of a page when it expands from the collapsed state, instead of pushing the contents down? I've experimented with setting z-index properties on the navbar and other classes, as ...

cssbootstrap-4

Handling JSON Objects with Next.js and TypeScript

Currently, I am working on a personal project using Next.js and Typescript. Within the hello.ts file that is included with the app by default, I have added a JSON file. However, I am facing difficulties in mapping the JSON data and rendering its content. T ...

javascriptjsontypescriptobjectnext.js

Angular 8: A Guide to Updating Tags in innerHTML

Hello, below is the code I am working with: <span [innerHtml]="question.description | SafePipe: 'html'" style="font-weight:500;" class="ml-1"></span> Upon inspecting my website, I noticed that my <span> tag contains nested &l ...

typescriptangular8innerhtml

Issue with ng-click not triggering the $mdDialog callback

Utilizing Angular Material, I have functionality in TasksCtrl that triggers a $mdDialog - utilizing the locals property to pass an object that will be changed in DialogCtrl before being returned to the view. Nevertheless, the .then() callbacks do not trig ...

javascriptangularjsangular-material

The code "transform: rotate(' ')" does not seem to be functioning properly in Javascript

I set out to create a simple spin wheel exercise, but it quickly became more challenging than I anticipated. After researching how to make one online, I found code similar to mine that worked on a JSFiddle Example, yet my own code still didn't work. ...

javascripthtmlcss

Creating a fresh dataset using a 2D array in node-gdal-async

I'm facing a challenge in JavaScript where I need to create a new dataset from a 2D array. Despite my efforts, I can't seem to figure out the necessary steps from the documentation. It seems that in order to create this new dataset, I must utili ...

javascripttypescripthdf5gdal

The Boostrap Datepicker fails to display

I'm having trouble integrating a Bootstrap Datepicker into my form. I got it working outside of the form, but when I try to include the code in my form, it doesn't seem to work. All necessary files are present and the code is identical. <!D ...

jqueryhtmlcssbootstrap-4bootstrap-datepicker

JavaScript Loading Screen - Issues with window.onload functionality

I am currently working on creating a loading screen for my project. I need to use JavaScript to remove the CSS property "Display: none" from the page, but for some reason, my code is not functioning as expected. The Issue: I discovered that using window. ...

javascripthtmlcss

Employing multiple subscriptions within a function

I am facing an issue in my Angular application where I am trying to display a detailed summary of the sales for a specific drink using the DrinkDetailComponent. However, upon initializing the component, only one backend call is being made to retrieve infor ...

angulartypescriptsubscription

The program encountered an issue with determining the length of this.slides. The property 'length' is undefined and cannot be

console.log(this.slides.length()); displays Cannot read property 'length' of undefined. After a setTimeout of 100 milliseconds, this message will appear. Is there a way to determine if a child component has finished loading from the parent compo ...

angularionic2

delayed updating of property not visible in angular 10 immediately

I needed to hide a div based on a condition, so I decided to use the hidden property like below: <div [hidden]="isControlDisplayed()?false:true"> The isControlDisplayed() method determines whether to show or hide the div based on the value ...

javascriptangulartypescript