Office UI fabric TextField control height

%3CLINGO-SUB%20id%3D%22lingo-sub-172945%22%20slang%3D%22en-US%22%3EOffice%20UI%20fabric%20TextField%20control%20height%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-172945%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EOffice%20UI%20fabric%20TextField%20control%20was%20added%20to%20SPFx%20web%20part.%20Need%20to%20change%20the%20text%20box%20height%20via%20css.%20Although%20the%20style%20is%20changed%20it%20does%20not%20get%20effected%20fro%20TextField%20but%20other%20control%20like%20button%20will%20get%20change.%3C%2FP%3E%0A%3CP%3EReally%20appreciate%20support%20on%20finding%20approach%20for%20this.%3C%2FP%3E%0A%3CP%3EMany%20Thanks%2C%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-172999%22%20slang%3D%22en-US%22%3ERe%3A%20Office%20UI%20fabric%20TextField%20control%20height%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-172999%22%20slang%3D%22en-US%22%3E%3CP%3Eyou%20need%20to%20changed%20the%20ms-TextField%20class%20in%20your%20scss%20file%26nbsp%3B%20and%20not%20have%20a%20prefix%20added%20to%20it.%20Like%20this%3A%3C%2FP%3E%0A%3CDIV%3E%0A%3CDIV%3E%3CSPAN%3E%3Aglobal%20%7B%3C%2FSPAN%3E%3C%2FDIV%3E%0A%3CDIV%3E%3CSPAN%3E.ms-TextField%3C%2FSPAN%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%3C%2FDIV%3E%0A%3CDIV%3E%3CSPAN%3Eheight%3C%2FSPAN%3E%3CSPAN%3E%3A%20%3C%2FSPAN%3E%3CSPAN%3E400px%3C%2FSPAN%3E%3CSPAN%3E%3B%3C%2FSPAN%3E%3C%2FDIV%3E%0A%3CDIV%3E%3CSPAN%3E%20%7D%3C%2FSPAN%3E%3C%2FDIV%3E%0A%3CDIV%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FDIV%3E%0A%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CDIV%3E%3CSPAN%3Efor%20more%20info%20see%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fn8d.at%2Fblog%2Fhow-to-better-control-css-class-naming-in-spfx%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fn8d.at%2Fblog%2Fhow-to-better-control-css-class-naming-in-spfx%2F%3C%2FA%3E%3C%2FSPAN%3E%3C%2FDIV%3E%0A%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%0A%3C%2FDIV%3E%3C%2FLINGO-BODY%3E
Highlighted
Occasional Contributor

Hi,

 

Office UI fabric TextField control was added to SPFx web part. Need to change the text box height via css. Although the style is changed it does not get effected fro TextField but other control like button will get change.

Really appreciate support on finding approach for this.

Many Thanks,

1 Reply
Highlighted

you need to changed the ms-TextField class in your scss file  and not have a prefix added to it. Like this:

:global {
.ms-TextField{
height: 400px;
}
}