Reduce height material textfield

Question

I'm using the material design and I imported the text field exactly as explained in the documentation page(https://material.io/develop/web/components/input-controls/text-field/). So, without Angular or React. I don't understand how I can reduce the height of the input field since all the solutions online use Angular or React

You can check this link, probably it can help with your problem: https://stackoverflow.com/questions/53854030/set-textfield-height-material-ui — A S M Sayem, Sep 23 '19 at 13:17
Yes, as I said, all the solutions seem to be with angular or react, I'm using plain javascript/html/css — Andy, Sep 23 '19 at 13:18

score 0 · Answer 1 · answered Sep 23 '19 at 14:20

0

I assume you use SASS? Therefore there would be a variable to achive this:

https://github.com/material-components/material-components-web/blob/ef99808cba809294cb2d90903d12cdf930071f4d/packages/mdc-textfield/_variables.scss#L55

$mdc-text-field-height: 56px !default;

Otherwise you could try to change it hard coded via global css, but I would not suggest that:

input.mdc-text-field__input {
    font-size: 10px;
    line-height: 10px;
    height: 10px;
}

div.mdc-text-field.mdc-ripple-upgraded {
    height: 30px;
}

answered Sep 23 '19 at 14:20

byteSamurai

52
9

I tried your code, but doing so the 'placeolder label' is not centred at first – Andy Sep 23 '19 at 15:42
Which code? The CSS? Of course you need to override everything, so there is much more to do. Sass would be the best solution, as you will use the element in a way is was designed for. Is sass no solution for you? – byteSamurai Sep 24 '19 at 06:33
Yes, I am using sass. I meant that changing just the $mdc-text-field-height variable is not enough, because the placeholder won't be centred – Andy Sep 24 '19 at 08:21

Reduce height material textfield

1 Answers1