Is there a way to utilize an Angular Material checkbox without any extra gaps or spacing?

Currently, I am working with Angular Material and trying to figure out how to remove the default spacing around the checkbox. The checkboxes in Angular Material are typically surrounded by some space (as shown in the image). Is there a simple way to eliminate this space so that I can directly insert the checkbox into my content without any extra padding?

<mat-checkbox formControlName="rememberMe"><span class="remember-me">Remember me</span></mat-checkbox>

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

padding:0 didn't have any effect.

The following code also failed:

input[type="checkbox"] {
  width: 10px;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

I appreciate your help in advance!

cssangularangular-material

Answer №1

Here is the CSS code you can use:

This CSS code specifically targets the padding, height, and width of the element to achieve the desired size, as well as positioning the background absolutely.

::ng-deep .custom-checkbox > div > div.mdc-checkbox {
  padding: 0px !important;
}

::ng-deep
  .custom-checkbox
  > div
  > div.mdc-checkbox
  > .mat-mdc-checkbox-touch-target,
::ng-deep
  .custom-checkbox
  > div
  > div.mdc-checkbox
  > .mdc-checkbox__native-control {
  height: 18px !important;
  width: 18px !important;
}

::ng-deep
  .custom-checkbox
  > div
  > div.mdc-checkbox
  > .mdc-checkbox__background {
  top: 0px !important;
  left: 0px !important;
}

Check out the Stackblitz Demo for reference!

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

What's the best way to link up rotated div elements?

I'm currently attempting to connect rotated divs at a 45-degree angle, but I'm struggling to find the solution. Here is the current state of the page: Here is a screenshot of the page: https://i.sstatic.net/jqPYJ.png This is what I am aiming f ...

htmlcssbootstrap-5

Display a free Admob banner within an Ionic 3 application

I have integrated Admob's banner into my Ionic 3 app following the guidelines provided in the Ionic documentation at this link. Below is the code snippet I used for displaying the banner on the homepage: import { Component } from '@angular/core ...

angularcordovatypescriptionic-frameworkadmob

I prefer to conceal the permission-wrapper component tag in the DOM when using Angular

Looking to hide the permission-wrapper component tag from appearing in the DOM. CRUCIAL: The component itself should conceal the component's tag (such as ), and instead display the template's content when necessary. For example, let's crea ...

angular

The navigation bar vanishes as soon as I click the Modal button

I am experiencing an issue where the Navbar disappears when I open a modal while using Bootstrap. Navbar before opening Modal https://i.stack.imgur.com/Oo9qb.png Navbar after opening Modal https://i.stack.imgur.com/dlK1V.png <script src="https:// ...

htmlcssnavbarbootstrap-5bootstrap5-modal

Testing the open dialog with a unit test case

I encountered an issue while writing a unit test case for the open dialog feature in Angular 7. A TypeError is being thrown: "Cannot read property 'debugElement' of undefined." I am seeking assistance from anyone who can help me troubleshoot this ...

angularunit-testing

Pause and be patient while in the function that delivers an observable

I have a function that loads user details and returns an observable. This function is called from multiple places, but I want to prevent redundant calls by waiting until the result is loaded after the first call. Can anyone suggest how this can be accompli ...

angulartypescriptrxjs

Positioning multiple images in CSS

I am facing an issue with my background images where one of them is invisible and cannot be displayed. Additionally, the padding-top for the li a element seems to not be working properly. HTML: <ul class="menu"> <li class="item-101 current a ...

css

Using identical class names in different components was not possible as the CSS was not being contained within the styled component's scope

I am encountering a frustrating issue that seems to defy the essence of CSS in JS. The problem arises when I use styled-components and attempt to apply a classname that is already used higher up in the React component tree within a styled component. Surpri ...

htmlcssreactjsstyled-componentscss-in-js

Media Queries seem to be unresponsive on Tablet and Desktop devices

I've been trying to resolve this issue for quite some time now, but I'm still unable to find a solution. My goal is to center the Wufoo Forms visually on different screen sizes using media queries, however, despite rewriting them multiple times a ...

cssmedia-querieswufoo

Stacking parent elements above children in CSS styling

I am encountering an issue with the following DIV structure: <div id="parent"> <div id="child"></div> <div id="child2"></div> </div> My goal is to have a partially opaque background for the parent DIV and fully visible ...

css

Trigger a function from a Bootstrap modal

Here is a preview of my HTML code : <form action="form2_action.php" method="post"> <table> <tr> <td>First Name </td> <td>:</td> <td><input type="text" id="f ...

javascriptjqueryhtmlcsstwitter-bootstrap

How to style a div to center an image vertically with text using CSS

I attempted to vertically align an image next to text within my link. Thus far, I've relied on a background image to achieve perfect vertical centering for the image of my text. CSS .label { margin: 0 0 0 15px; padding: 0; color: #fff; } a.morein ...

css

Unique ways to serialize an HTML element efficiently: JavaScript tricks

Is there a way to store a reference of an HTML tag for future use? For instance, if I click on a div and save a pointer to that div in JavaScript, is it possible to serialize this pointer and then de-serialize it to use in another part of the web applicat ...

javascripthtmlcssdomserialization

New to the world of web design and seeking answers as to why my style is not being applied

After diligently following the courses on CodeAcademy (I know, kind of lame but it's a start), I finally feel confident in my ability to write my own HTML and CSS code. However, when I tried to do so using Sublime Text 3 and opened my HTML file, I not ...

htmlcss

Troubleshooting multiple element visibility problems with jQuery

Please take a look at the code snippet below. $(document).ready(function(){ $(".like-btn").hover(function() { var rowid = $(this).attr("data-rowid"); $(".reaction-box[data-rowid='" + rowid + "']").fadeIn(100, function() { $(".reaction ...

javascriptjqueryhtmlcssjquery-ui

Utilizing PHP to create an interactive website

As a novice PHP developer, I took to Google in search of tutorials on creating dynamic PHP websites. What I found was that many tutorials used the $_GET variable to manipulate URLs and make them appear like this: example.com/?page=home example.com/?page= ...

phpjavascripthtmlcss

Elements that intersect in a site's adaptable layout

I need to create a design similar to this using HTML/CSS with the Skeleton framework: view design preview I've experimented with various methods to overlap the background and image, utilizing absolute positioning for the image. However, this approach ...

htmlcssoverlappingskeleton-css-boilerplateresponsive

What is the significance of the error message "Surprisingly in Angular Zone despite expectations"?

Ever since upgrading from Angular 2 RC4 to RC5, I've been encountering this error. Although it doesn't seem to impact the application's functionality, it keeps appearing in the console and may draw attention away from other errors. Does any ...

angular

ERROR: There was a problem with the NgbTabset class at line 12 in the inline template. This issue occurred because the 'templateRef' property could not be read as it was undefined

I am utilizing ng-bootstrap instead of ui-bootstrap in angular2 for my project. This is the HTML code I am using: <div class="row" style="height: 100%;"> <div class="col-12"> <div class="container" id="contentMain"> <div ...

angularangular-ui-bootstrapng-bootstrapangular-ui-bootstrap-tab

No display of Tailwind updates on local server in Safari browser using NextJS and a Mac M1

For my personal project with NextJS, I am using Tailwind CSS, but I am experiencing frequent issues with updating styles. It seems like there is a 50/50 chance that Tailwind will apply the styles to the component properly, and sometimes I have to go throug ...

cssreactjsnext.jstailwind-css