How to add mixin for height in mwc textfield?

#textBox{ text-transform: none; --mdc-theme-primary: transparent; --mdc-text-field-fill-color: #fff; --mdc-text-field-hover-line-color: #f5f5f5; --mwc-text-width: 100%; width:100%; }

:host(:not([disabled])) .mdc-text-field:not(.mdc-text-field--outlined) { background-color: transparent; } .mdc-text-field:not(.mdc-text-field--disabled) { background-color: rgb(245, 245, 245); } .mdc-text-field { display: flex; width: 100%; } .mdc-text-field { height: 56px; display: inline-flex; position: relative; box-sizing: border-box; will-change: opacity, transform, color; border-radius: 4px 4px 0px 0px; overflow: hidden; } .mdc-text-field { --mdc-ripple-fg-size: 0; --mdc-ripple-left: 0; --mdc-ripple-top: 0; --mdc-ripple-fg-scale: 1; --mdc-ripple-fg-translate-end: 0; --mdc-ripple-fg-translate-start: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } user agent stylesheet label { cursor: default; } <style> #textfield { width: var(--text-field-width,80%); height: 100%; position: absolute; left: 0; top: -12px; text-transform: capitalize; --mwc-text-width: 100%; } <style> mwc-textfield { --mdc-theme-primary: transparent; --mdc-text-field-ink-color: black; --mdc-text-field-fill-color: transparent; --mdc-text-field-disabled-fill-color: transparent; }

Material design components vs Material web components

I have read the documentations related to this version. In this documentation, I have found that we can add mixin for height.

The first thing to note here is that there are two different libraries of material components: the one you are referring to is MDC (Material Design Components, distributed on npm as @material/<component>) which is a SASS+JS implementation of Material components. The other one is MWC (Material Web Components, distributed as @material/mwc-<component>), a collection of actual WebComponents based on the former library. So keep in mind that the documentation refers to the MDC counterpart of the MWC component you're actually using (<mwc-textfield>).

Styling from the outside

What you're trying to do here

#textbox.mdc-text-field--height {
  height: 45px;
}

doesn't work mainly because selecting inside a custom element's shadow root is not possible (at least, not anymore); also, the element responsible for the height is the <label>, whose class is .mdc-text-field.

The querySelector way

The quickest way to change the height that comes to my mind is this:

import { LitElement, html, property, customElement, css, query } from 'lit-element';
import '@material/mwc-textfield';

@customElement('my-component')
export class MyComponent extends LitElement {
  // Select the text field
  @query('mwc-textfield') textField;

  async firstUpdated() {
    // Wait for its dom to be ready
    await this.textField.updateComplete;
    // Programmatically select the label
    // and change the height
    this.textField
    .shadowRoot
    .querySelector('.mdc-text-field')
    .style
    .height = '45px';
  }

  render() {
    return html`<mwc-textfield></mwc-textfield>`;
  }
}

however I would really not recommend it: performance and elegance aside, it'll probably break some of mwc-textfield features such as the floating label.

The extension way

You can also enforce the height by extending TextField and overriding the styles:

import {LitElement, html, customElement, css} from 'lit-element';
import {TextField} from '@material/mwc-textfield/mwc-textfield';

@customElement('my-textfield')
export class MyTextfield extends TextField {
  static styles = [TextField.styles, css`
    .mdc-text-field {
      height: 45px;
    }
  `];
}

// Then use <my-textfield> instead of <mwc-textfield>

but again, like the above, use at your own risk...

Using the mixin

I guess for now the only way of using the height mixin is building a customised version of TextField which more or less goes like this:

clone the mwc repo (yeah, it's a monorepo so you get all the other components as well, but I'm pretty sure you can delete all the ones not imported by mwc-textfield)
npm install
in packages/mwc-textfield/src/mwc-textfield.scss use the mixin:
```
@include mixins.height(45px);
```
probably around here
npm run build
copy the mwc-textfield folder and paste it in your project (delete the source files, npm pack may be handy for this), then change the imports from @material/mwc-textfield to ./path/to/custom-textfield

Certainly too much work for changing a height... The good news is MWC is still in development and it cannot be excluded that they'll add a CSS custom property or some other way to customise the height. Also, the new density concepts are being implemented in MWC (sadly not yet in TextField), which could be just what you need.

There is also an open issue about this, let's see what they say

Recommended topics

Hot tags