Set max width for Office UI Fabric TextField

Question

How do I set max width for a TextField? By default, the width is set to maximum size

Answer 1

You can set the max-width property of the component by implementing your own styles function as done in this Codepen example.

const getStyles = () => {
  return {
    root: {
      maxWidth: '100px'
    }
  }
};

<TextField 
  id='myTextField'
  spellcheck={ false }
  name='bar'          
  placeholder='Placeholder text' 
  defaultValue='Default text'
  styles={ getStyles }
/>

More documentation about this approach can be found at https://github.com/OfficeDev/office-ui-fabric-react/wiki/Component-Styling#styles-prop.

Answer 2

You can add style attribute to a <TextField> component:

<TextField
   ...
   style={{maxWidth: '100px'}} 
/>

I hope it will help you.

Answer 3

Try to use max-width to set the maximum width the container should have.

.text-field{
  width: 100%;
  max-width: 500px;
  height: 50px;
  border: 2px solid black;
}

<div class="text-field">
  <p>example<p> 
<div>