Featured

Inneka Weather mobile application released

Loading...

It’s so happy to announce about the release of 1.0.0 version of Inneka Weather mobile application on Google Play.

Download on Google Play

Development Road

Version 1.0.3 features:

  • Login/logout/authen
  • Share to social media (Facebook/twitter/zalo/…)
  • Auto get random image by weather subject via api

Version 1.0.2 features:

  • Add nearby city features
  • City information (cont)
  • Switch C <-> F
  • Save location to favourite/local
  • Vote/rate for city/country + reviews

Version 1.0.1 features:

  • Fix input text box with auto trim
  • Update to React Native SDK 33.0.0
  • Add humidity, wind, wind direction, air pressure
  • Forecast next 5 days
  • Add city information (partly)
  • Add max, min temparature
  • Auto detect location with newest lutilsjs library

Version 1.0.0 features:

  • Realtime temparature most cities in the world.
  • Change background automatically with the weather condition
  • Cool design with clean UI
Loading...

Simple_form class form-horizontal with bootstrap 3 not working in rails 4

Loading...


Simple_form class form-horizontal with bootstrap 3 not working in rails 4

I have two rails apps, and the 'form-horizontal' is working in one, but not the other, and I have no idea why.
First app is called "Horizontal" (my test app) and the other is "Inventory"
Form in "horizontal" app:
<%= simple_form_for(@part, html: {class: 'form-horizontal' }) do |f| %>
  
<%= f.input :name %>
<%= f.input :number %>
<%= f.submit %>
<% end %> and looks like this in the browser: and the form for the "inventory" app is: <%= simple_form_for(@item, html: {class: 'form-horizontal' }) do |f| %> <%= f.error_notification %>
<%= f.input :part_number %>
<%= f.input :on_order_qty %> <%= f.input :revision %> <%= f.input :current_rev %> <%= f.input :name, required: false%>
<%= f.simple_fields_for :parts do |part| %> <%= render 'part_fields', :f => part %> <% end %>
<%= f.input :stock_qty %> <%= f.input :ncmr_qty %>
<%= f.submit %>
<% end %> but it looks like this in the browser: Why won't the form-horizontal class work in the "Inventory" app? It appears that the integer input fields are getting rendered horizontally, but something weird is happening in the text input fields. Here is the source html from the browser for the "Inventory" app:

( I took out the html for the nested fields and some other fields for brevity)
I've tested in both Chrome and Firefox. I've checked that the bootstrap-sass gem and simple_form gem are the same versions. I have no fancy customization css or javascript, just the @import 'bootstrap'; line in a bootstrap_custom.css.scss file in both apps. I don't know why the text input fields cover the whole width of the screen in the "Inventory" app, but the integer fields seem to be fine and rendering horizontally. What's wrong here?

Solutions/Answers:

Answer 1:

I ran into a similar issue and found a pretty quick fix here http://www.iconoclastlabs.com/blog/using-twitter-bootstrap-3-with-simple_form

The simple fix is (after doing the normal simple form bootstrap init stuff -see below), you add the following code to an initializer (like config/initializers/simple_form_bootstrap.rb)

inputs = %w[
  CollectionSelectInput
  DateTimeInput
  FileInput
  GroupedCollectionSelectInput
  NumericInput
  PasswordInput
  RangeInput
  StringInput
  TextInput
]

inputs.each do |input_type|
  superclass = "SimpleForm::Inputs::#{input_type}".constantize

  new_class = Class.new(superclass) do
    def input_html_classes
      super.push('form-control')
    end
  end

  Object.const_set(input_type, new_class)
end

and you are off to the races.

The “normal simple form bootstrap init stuff” goes something like:

rails generate simple_form:install --bootstrap

If you want horizontal forms, add this to your simple_form config

config.form_class = "simple_form form-horizontal"

CAVEAT: Based on some recent comments, it appears this many not work for more recent versions of simple_form. I wrote the post some time ago and the project that was using this code (for me) is no longer using simple_form so it’s hard to track down the exact version number. I believe this will work for verisions 2.x. Once you get to v3 you may have issues and have to find a different solution.

Answer 2:

Simple Form 3.1.0.rc1 has been released!! This supports bootstrap 3. Just update your gem to the latest version this will solve your problem. You can check the other enhancements through the change logs here https://github.com/plataformatec/simple_form/blob/v3.1.0.rc1/CHANGELOG.md

Answer 3:

Just update your simple_form to

gem 'simple_form', '3.1.0.rc2'

And then re-run

$ rails generate simple_form:install --bootstrap

Answer 4:

I tried quite many different solutions but, nothing helped until I’ve added wrapper: :horizontal_form line to each form inputs. And, I have the latest simple_form version: 3.2.1

For example:

= f.input :payment_term, wrapper: :horizontal_form

Hint: https://gist.github.com/chunlea/11125126/

Answer 5:

To override on per form basis, change:

<%= simple_form_for(@item, html: {class: 'form-horizontal' }) do |f| %>

to

<%= simple_form_for(@item, wrapper: :horizontal_form) do |f| %>

to change all forms to horizontal, change initializer:

config/initializers/simple_form_bootstrap.rb line:

config.default_wrapper = :vertical_form

to

config.default_wrapper = :horizontal_form

(remember to restart rails server after changing initializer)

to change just an individual input, change:

<%= f.input :on_order_qty %>

to

<%= f.input :on_order_qty, wrapper: :horizontal_form %>

Answer 6:

Use simple form RC1. There is an entire example project: https://github.com/rafaelfranca/simple_form-bootstrap . I’ve just copied bootstrap initializer and followed horirozontal view example at https://github.com/rafaelfranca/simple_form-bootstrap/tree/master/app/views/examples.

Answer 7:

If all the above doesn’t work try gem

gem ‘simple_form_bootstrap3’

Need to replace form_for with horizontal_form_for

Answer 8:

Please check out the very helpful sample app here for usage of Simple Form and the Bootstrap toolkit on a Rails 4 application.:

http://simple-form-bootstrap.plataformatec.com.br/

Don’t forget the docs page.

Answer 9:

I had an issue with the full length of the input field spanning my entire page. Here is what I did and I hope it helps someone else.
Using simple_form 3.4.0

Open config/initializers/simple_form_bootstrap.rb
At the bottom of the page I changed the following:
From

config.default_wrapper = :vertical_form  
  config.wrapper_mappings = {  
    check_boxes: :vertical_radio_and_checkboxes,  
    radio_buttons: :vertical_radio_and_checkboxes,
    file: :vertical_file_input,
    boolean: :vertical_boolean,
    datetime: :multi_select,
    date: :multi_select,
    time: :multi_select
  }
end

To:

  config.default_wrapper = :horizontal_form
  config.wrapper_mappings = {
    check_boxes: :horizontal_radio_and_checkboxes,
    radio_buttons: :horizontal_radio_and_checkboxes,
    file: :horizontal_file_input,
    boolean: :horizontal_boolean,
    datetime: :multi_select,
    date: :multi_select,
    time: :multi_select
  }
end

Then restart your app to reinitialize.

Answer 10:

When i use form-horizontal in my code, i also modify the different inputs with the bootstrap classes. For exemple with bootstrap 3:

<div class="form-group">
    <%= f.label :name, class: "control-label col-sm-3" %>
    <div class="col-sm-4"><%= f.text_field :name, placeholder: "Your placeholder", class: "form-control" %></div>
</div>

And now you can adjust the col-sm to col-sm-12 if you want the entire width of your app. I think it’s easier to customize this way. ( col-sm are for bootstrap 3, if you need older version i think you have to use the old span- notation)

More info for bootsrap form here: doc

Here is an exemple of code with bootstrap 2 and simple form: doc

The output form with bootsrap 2 should look like this:

<form class="form-horizontal">
  <div class="control-group">
    <label class="control-label" for="inputName">Name</label>
    <div class="controls">
      <input type="text" id="Name" placeholder="Name">
    </div>
  </div>
</form>

I think you need to set a control-group class div and a controls class div.

Here is the doc form the old syntax: doc

Hope it helps

References

Loading...