CODEWITHSUNDEEP
ruby-on-railsformstwitter-bootstrap
PatrickLightning
PatrickLightning

Reputation: 117

Bootstrap 3 and Simple Form display issue with form inputs

Recent upgrade to Bootstrap 3 on a Rails app. SimpleForm text box and also other form inputs are too large - they are erroneously full-page in length. The app does have responsive design, and the form input boxes do resize. I'd like to limit the form input size to 50% instead of full page. I did add this initializer gist https://gist.github.com/tokenvolt/6599141 but it did not seem to have an effect.

I am unfamiliar with the Bootstrap3/Simpleform2.1.1 conflicts.

I adjusted the width to 50% in the application.css.scss, but that did not make a clean change

/* forms */

input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  @include box_sizing;
}

Upvotes: 1

Views: 397

Answers (1)

monty_lennie
monty_lennie

Reputation: 3331

By length do you mean width? If you don't want the form to be too wide you could divide the page into columns and then put the form into a smaller column.

<div class="row">
  <div class="col-sm-6 col-sm-offset-3">
    <%= simple_form-for...
  </div>
</div>

Bootstrap uses a gridsystem that divides the page into 12 columns. if you just put the form on, it will take up all 12 columns (the whole page) so you need to specify how many columns you want the form to take up. Here's a post that really helped me understand the new gridsystem: http://blog.jetstrap.com/2013/08/bootstrap-3-grids-explained/

Upvotes: 2

Related Questions