How to set a custom height for Mat-form-field in Angular 8 using pixel values

Is there a way to adjust the height of mat-form-field when using appearance="outline" to a specific pixel measurement, such as 40px (or any other value required by the UX team in the future)? I need to decrease the size of the mat-form-field.

How can this modification be achieved? Which part of the code needs to be adjusted to set the height to 40px? -1.1? .75 , 133%, Looking for a function or mathematical formula based on the provided solution below, or any alternative method that may be effective.

::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;}
::ng-deep .mat-form-field-label-wrapper { top: -1.5em; }

::ng-deep .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    transform: translateY(-1.1em) scale(.75);
    width: 133.33333%;
}
cssangulartypescriptangular-materialangular8

Answer №1

If you're unsure where to start cutting, here are a few suggestions for adjusting the size of your element:

For removing top and bottom margins:

::ng-deep mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper {
    margin: 0;
}

To change the font size:

mat-form-field {
    font-size: 10px;
}

To eliminate hints and errors at the bottom:

::ng-deep .mat-form-field-wrapper {
    padding-bottom: 0;
}
::ng-deep .mat-form-field-subscript-wrapper {
    display: none;
}

Adjusting padding (default is 1em top and bottom):

::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
    padding: .5em;
}

Note: If you opt for the last option, you'll need to modify the top or margin-top of the .mat-form-field-label like this:

::ng-deep .mat-form-field-appearance-outline .mat-form-field-label {
    top: ...;
    margin-top: ...;
}

Answer №2

To view the code related to project dependencies (@angular/material 8.2.3), you can refer to this file path: 

node_modules\@angular\material\_theming.scss

Within the file, look for around line number 4540 where you will find two mixins: _mat-form-field-outline-label-floating and mat-form-field-outline-typography:

// The following code snippet is used to differentiate instances of the _mat-form-field-label-floating mixin slightly
// in order to prevent Google's CSS Optimizer from collapsing the declarations due to unknown pseudo-classes in some browsers.
$mat-form-field-outline-dedupe: 0;

// This mixin applies a floating label above the form field control itself.
@mixin _mat-form-field-outline-label-floating($font-scale, $infix-padding, $infix-margin-top) {
  transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-outline-dedupe)
  scale($font-scale);
  width: 100% / $font-scale + $mat-form-field-outline-dedupe;

  $mat-form-field-outline-dedupe: $mat-form-field-outline-dedupe + 0.00001 !global;
}

// This mixin sets typography properties for the outlined form field.
@mixin mat-form-field-outline-typography($config) {
  // Define variables for various measurements and scales needed for typography styles.

  // Further CSS rules defining the appearance of the outline input fields go here...
}

Answer №3

Hey there, I've got a solution for you:

To adjust the height of your mat-form-field:

::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
height: 40px !important
}

::ng-deep .mat-form-field-infix {
padding-top: 1px !important;
}

Explanation:

You can customize the height of your mat-form-field to your preference.

 ::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
    height: 40px !important
    }

Additionally, you can adjust the placeholder padding to align with the new height setting.

  ::ng-deep .mat-form-field-infix {
    padding-top: 1px !important;
    }

I tested this and it works perfectly.

Answer №4

You have the option to include a panelClass within your mat-form-field, as illustrated below:

Incorporate this in your component.html file:

 <mat-form-field panelClass="example-class"></mat-form-field>

Then proceed to define its style in the global CSS file.

Within styles.scss:

.example-class{
   height:40px
 }

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

Scroll vertically within a Xamarin Android ListView

I have been attempting to implement a vertical scroll for a list view, but I am facing an issue where all the list view items are displayed even if they exceed the phone's screen size. This is the code snippet I have been using: <LinearLayout xm ...

androidcssxamarinxamarin.android

Preventing the collapse of the right column in a 2-column layout with Bootstrap 3

I've recently begun exploring Bootstrap and am attempting to achieve the following: (Left column - larger) Heading Heading 2 Heading Image Heading Image Heading Address (Right column - smaller) Heading Paragraph List items My issue ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Why does using rgba color with an alpha value cause my div to become see-through?

I am currently attempting to assign a background color to a specific style of pop-up, but whenever I use a value that includes an alpha channel, it ends up being transparent. This is the CSS code I have been using: --color: 255, 144, 106, 0.18; background ...

javascriptcss

Is left padding appearing mysteriously (supernatural CSS phenomenon)?

While using the Firebug inspector tool, if you hover over #jimgMenu ul, you may notice that it has left padding without any corresponding CSS rule: Where is this mysterious left padding coming from? Why is the origin not visible? EDIT: If you navigate t ...

jquerycss

Display a specific element only if another element exceeds a specified height

A snippet of HTML code is given below: <span class="day-number">{{day-number}}</span> <div class="event-box"> <div class="event-container"> </div> <div class="more-events">more ...</div> </div> The .e ...

javascriptjqueryhtmlcss

What is the best approach to addressing an HTML layout problem?

I am working on a three-column layout where the third column contains two div elements. The first div is fixed, while the second div has a minimum height of 50px. I want this second div to expand in height as its content grows, reaching the bottom of the t ...

htmlcsstablelayout

extra elements within the 'navbar-toggler' icon button

How to create a navbar with multiple menu items that are always visible? Some items will be shown upon clicking the navbar button, while others will remain steady. Using the bootstrap navbar-toggler button can make the navbar longer when adding more items ...

htmlcssbootstrap-4

The issue of TypeScript failing to return HTML Template Element from Constructor typing is causing complications

There is a restriction on using new to create an instance of Template, which extends an HTMLTemplateElement. To work around this limitation, I fetch and return an HTMLTemplateElement by using document.getElementById(id) within the constructor of the Templ ...

htmltypescriptdom

Nav bar breaching the Bootstrap threshold

I am new to using bootstrap and currently in the learning process. I am facing an issue with the navigation bar I created. All the contents are aligning to the right, but the search bar and tabs are breaking onto a new line. I have attempted various soluti ...

htmlcsstwitter-bootstrap

Ensuring the accurate usage of key-value pairs in a returned object through type-checking

After generating a type definition for possible response bodies, I am looking to create a function that returns objects shaped as { code, body }, which are validated against the typing provided. My current solution looks like this: type Codes<Bodies> ...

javascripttypescripttypes

How to retrieve the type of a computed keyof T as a generic type within TypeScript

I am working with two different interfaces: interface PersonRequirements{ user:string, password:string, id:number } export interface Requirement<R> { name: keyof R & string, save: () => any,/* I want this return type to be ...

javascripttypescriptgenerics

Unable to apply "@angular/fire" using ng add command because the package does not have schematic support

Just completed the upgrade to Angular CLI 12.0.0, alongside Node 14.17.0 and npm 7.13.0 Encountering an issue when attempting to integrate Angular Fire into my project: ng add @angular/fire The following message pops up: The package @angular/[email ...

angularfirebasenpmgoogle-cloud-firestore

Feasible: Embedding my complete website using custom HTML code into an iframe

I have the HTML for a website saved in a JavaScript string and I want to display it within an iframe. How can I insert this HTML string into the iframe and make the website appear? I have attempted to use this.src = HTML_STR; this.innerHTML = HTML_STR; but ...

javascripthtmlcssiframe

A guide to successfully transferring data array values from a Parent Component to a Child Component using APIs in Angular

To transfer values of this.bookingInfo = bookings.responseObj.txnValues; array from the parent component to the bookingInfo array in my child component and then insert that data into the chartNameChartTTV.data = []; array in the child component. Here, divN ...

angulartypescriptamcharts4

The localization feature in jQuery mobile is causing the button style to disappear

For my current project, I am utilizing the jquerymobile framework along with the i18Next localization library. Here is the HTML code snippet: <div id="messageboxPage" data-role="page" data-theme="a"> &l ...

jqueryhtmlcssjquery-mobilei18next

Creating a dynamic pulse effect using jQuery to manipulate CSS box-shadow

My goal is to create a pulsating effect using CSS box-shadow through jQuery. Despite my best efforts, the code I attempted failed to produce the desired smooth pulse effect with box-shadow. The code snippet I experimented with: <div class="one"> &l ...

javascriptjqueryhtmlcss

Is it possible to apply a personalized scrollbar design to the Autocomplete Listbox component in Mui?

I am struggling to implement a custom scroll style in Autocomplete Listbox. https://i.sstatic.net/MifSm.png After multiple attempts and thorough research, I have been unsuccessful in achieving the desired result. Here is my most recent code: <Aut ...

cssscrollmaterial-ui

"Trouble arises as bootstrap-select fails to function properly within a Bootstrap dropdown menu

I'm attempting to incorporate a multiselect input from the bootstrap-select Library into a Bootstrap dropdown menu. The issue arises when I open the dropdown menu and click on the multiselect input, causing the menu to close and preventing me from usi ...

htmljquerycssbootstrap-4bootstrap-select

How can the 'env' property in Nuxt.js be utilized to access the new API?

I have been working on creating news web apps that utilize newsapi.org. To protect my API key, I decided to use the env property in Nuxt.Js. However, I am now encountering a 401 status code from the server. Firstly, I created the .env file in my project d ...

javascripttypescriptvue.jsnuxt.jsmiddleware

Unit testing in NodeJS using Mocha where global variables injected from WebPack are utilized through the DefinePlugin feature

When using the WebPack.DefinePlugin to inject global variables, I've encountered an issue with integrating them into my Mocha unit tests. The tests don't recognize the global variables, and the Mocha documentation doesn't provide clear guida ...

node.jsunit-testingtypescriptmocha.js