0

I am using the tcomb-form for reactjs and I am having issues trying to change the styling of my image below:

enter image description here

The text fields are extremely large and I want to make it smaller, so I created an arbitrary class called abcStyle, but I am not noticing any changes. Anyone have an idea for this?

import t from 'tcomb-form'

const FormSchema = t.struct({
   name: t.String, //required str
   email: t.String, //required
   message: t.String
});

render() {
    return (
      <form onSubmit={this.onSubmit}>
        <div className="abcStyle">
          <t.form.Form ref="form" type={FormSchema}/>
        </div>

        <div className="form-group">
          <button type="submit" className="btn btn-primary">Send</button>
        </div>
      </form>
    )
  }

var abcStyle = {
  paddingLeft: 2000,
  width: 5000,
  color: '#3a3335'
};
ML.
  • 589
  • 1
  • 9
  • 33

2 Answers2

0

Your wrapper has a width of 5000, what do you expect to happen?

You have to make the wrapper the size you want your input fields since this is the only constrain they have and they will fill all the space available.

var abcStyle = {
  margin: '0 auto',
  width: '80%',
  color: '#3a3335'
};
David Gomez
  • 2,762
  • 2
  • 18
  • 28
  • This does not affect the width at all. I am not sure if the class even gets recognized in my code? – ML. Nov 02 '16 at 01:36
  • Check the syntax (use the one accepted by your CSS library), verify the class and the attributes are being apply using Chrome Dev Tools, and finally play with the CSS values in Chrome Dev Tools until you manage to change the `width`. It is possible that they can't override with a low specificity rule. – David Gomez Nov 02 '16 at 01:38
0

What about adding display: block to abcStyle ?

Damien Leroux
  • 11,177
  • 7
  • 43
  • 57