Ways to eliminate padding in mat-option

The desired output should resemble this:

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

Here is the HTML and CSS code for my array:

HTML:

<ng-container matColumnDef="collaborateurs">
        <th mat-header-cell *matHeaderCellDef class="vueListeTh"> Collaborateurs </th>
        <td mat-cell *matCellDef="let element" class="vueListeTd">
          <mat-select placeholder={{element.collaborateurs[0].nom}} class="collabSelect">
            <ng-container *ngFor="let collaborateur of element.collaborateurs">
              <mat-option [ngSwitch]="collaborateur.acces">
                <div *ngSwitchCase="'COMPLETED'" class="selectCollaborateurCompleted" >
                    {{collaborateur.nom}}
                </div>
                <div *ngSwitchCase="'PREVIEW'" class="selectCollaborateurCompleted" >
                    {{collaborateur.nom}}
                </div>
                <div *ngSwitchCase="'EDITION'" class="selectCollaborateurEdition" >
                    {{collaborateur.nom}}
                </div>
                <div *ngSwitchCase="'WAITING'" class="selectCollaborateurWaiting" >
                    {{collaborateur.nom}}
                </div>
                <div *ngSwitchDefault>
                    {{collaborateur.nom}}
                </div>
              </mat-option>
            </ng-container>
          </mat-select>
        </td>
      </ng-container>

CSS :

.vueListeTh.mat-header-cell, .vueListeTd {
padding: 0px;
  text-align: center;
}
.vueListeTh.mat-header-cell:first-of-type,
.vueListeTd.mat-cell:first-of-type {
  padding-left: 0px;
}
.vueListeTh.mat-header-cell:last-of-type,
.vueListeTd.mat-cell:last-of-type {
  padding-right: 0px;
}

.selectCollaborateurCompleted {
  padding-left: 4px;
  text-align: left;
  width: 100%;
  background-color: #8cc83c;
}

.selectCollaborateurEdition {
  padding-left: 4px;
  text-align: left;
  width: 100%;
  background-color: #ffff00;
}

.selectCollaborateurWaiting {
  padding-left: 4px;
  text-align: left;
  width: 100%;
  background-color: white;
}

I attempted to modify the .mat-option attribute by setting padding to none, however, it did not impact the external padding of the text div. I also tried using .ng-star-inserted and mat-select-content without success.

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

Answer №1

Consider using one of the following:

.custom-option {
  margin: 0 !important;
}

or

:host .custom-option {
  margin: 0;
}

The second option will also affect the styling of any parent elements.

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

ReactJS - Opt for useRef over useState for props substitution

Presented below is my ImageFallback component, which serves as a backup by displaying an svg image if the original one is not available. export interface ImageProps { srcImage: string; classNames?: string; fallbackImage?: FallbackImages; } const Im ...

Downloading files (PDF, JPG, PNG) instead of automatically opening in a new tab

Is there a way to automatically download PDF and JPG files instead of opening them in a new tab like .docx files? Currently, when clicking on a PDF or JPG link, it opens in a new tab rather than downloading the file. The desired behavior is for these files ...

What is the best arrangement of folders for an enterprise Angular 16 project that ensures both scalability and maintainability over an extended period of time?

Embarking on a significant Angular project with multiple features and modules ahead of me, I find myself in a quandary over the best folder structure to ensure scalability and easy maintenance in the long run. This project will encompass three modules, wi ...

After converting the HTML file to PDF, the line breaks seem to be missing on the PDF page compared to the original HTML page

I've scoured the internet high and low, but all I'm finding are solutions for line breaks in HTML pages. My issue isn't with line breaks; I have those handled in my HTML page. The problem arises when converting from HTML to PDF – the infor ...

Using Reactive Forms group in router-outlet

I'm encountering a problem while trying to share my Reactive Forms among multiple components, specifically in the context of routing. The error message I see is: 'Can't bind to 'group' since it isn't a known property of &apos ...

:active pseudo-class malfunctioning on button element

edit: I have discovered that the :active pseudo-class is not working properly in Chrome, but it does work in Edge. As a beginner in coding, I am trying to figure out why this issue exists. I am currently attempting to replicate the google homepage and str ...

Issue with Bazel and Angular Production Server: "Encountering Uncaught SyntaxError: Unexpected token '<'"

Utilizing this sample application found in the rules_nodejs repository, I've created an Angular app template that can be constructed or served using Bazel. The ts_devserver (BUILD file) launches without issues. However, there is a problem when servin ...

Steps for implementing a custom loader in a JHipster project instead of the default pacman loader

Seeking assistance to customize the loader for the jhipster initial page. Currently, it is loading the default packman loader of the jhipster application. Any help would be greatly appreciated. Thank you in advance. ...

Using HTML5 and CSS for 3D transformations along with stacking divs to create a unique accordion

Is there a way to stack divs vertically above each other and use CSS3 3D transforms to create a folding effect between them? I've tried rotating the divs on their X axis, but it leaves gaps between each div because they don't collapse into each o ...

Tips for Adding Style to a Recursive Directory Structure Using CSS

My goal is to create a recursive directory display in HTML using JSON data obtained from a Node.js server and utilizing it as the rendering context for a dustjs-linkedin template. The structure of the data looks like this: { "isDirectory": true, "path ...

An issue occurred while creating a generic MessageBus in Typescript with rxjs due to a typing mismatch

I'm currently working on developing a versatile MessageBus in Typescript. My goal is to create message classes that inherit from a main MessageBusMessage class, allowing for subscription to messages of a specific class type with strong generic typing ...

Obtaining input text value from a file in HTML: What is the process?

I'm currently working on an HTML form that sends the data from 2 inputs to an external website. My goal is to fetch the input value from a text file. Is this achievable? If yes, can you guide me on how to do it? <form action="http://blockbench.n ...

I'm having trouble getting my modal to work and display properly; I need to send it to the code behind for further assistance

I'm having trouble with my modal. I'm trying to create a sign-up modal and send it to my code behind page. I've incorporated bootstrap lumen and jquery, but I could use some assistance. Any help would be greatly appreciated. Thank you in adv ...

What is the best way to show an error message on a field when using a custom form validator?

In my JavaScript code, I have created a form validator that is capable of validating different input fields based on specific attributes. However, I need assistance with implementing error handling and scrolling to the erroneous field. For each <input& ...

Transfer the chosen selection from one form to another on the identical HTML page utilizing Django for the backend operation

I have two forms and I am looking to transfer the selected option from the first form to the second form as a hidden input. Can someone provide assistance on how to achieve this? Below is the attempted solution that did not work: <form id="headerform" ...

Angularjs: Adding Negative and Positive Numbers

How can I extract negative numbers and positive numbers separately from JSON data obtained from the server using the $http.get method? One of the fields in the data is called Credits, which contains both negative and positive values. Can anyone help me wit ...

Issues with ng-bind-html in AngularJS and JavaScript are preventing it from functioning

I am experimenting with creating a dynamic webpage that can change its contents without being limited to predefined templates (potentially offering infinite template options). Below is the code I am currently testing: <!DOCTYPE html> <html lang= ...

Enhancing the appearance of hyperlinks within a UIWebView

Currently, I am using a UIWebView to display content that includes clickable links. The UIWebView automatically highlights and underlines these links, but I'm wondering if there is a way to customize their styling. Specifically, I'd like to chang ...

How to generate a dropdown menu with hyperlinks in a Rails application

I am trying to set up a dropdown menu with clickable links as options, but I am having trouble finding an easy solution. Can anyone provide a simple example of how this can be achieved? Thank you ...

Simplify the cognitive load of the function

I'm facing a challenge with a function that has a cognitive complexity of 24, however, we have a requirement to limit it to a maximum of 15. export function parameterValueParser<T extends Structure>( structure: T ): (parameterValue: Value) =&g ...