Skip to content

Instantly share code, notes, and snippets.

@istvanp
Last active October 4, 2023 08:56
Show Gist options
  • Save istvanp/9d7dedff7c56f69d5524c054565ae42a to your computer and use it in GitHub Desktop.
Save istvanp/9d7dedff7c56f69d5524c054565ae42a to your computer and use it in GitHub Desktop.
Bootstrap v5 bootstrap_form Floating Labels support
# config/initializers/bootstrap_form.rb
module BootstrapForm
module FormGroup
def form_group_classes(options)
classes = ['mb-3', options[:class].try(:split)].flatten.compact
classes << 'form-label-group' if options[:layout] == :floating
classes << 'row' if horizontal_group_with_gutters?(options[:layout], classes)
classes << 'col-auto g-3' if field_inline_override?(options[:layout])
classes << feedback_class if options[:icon]
classes
end
def form_group_content(label, help_text, options, &block)
if group_layout_horizontal?(options[:layout])
concat(label).concat(tag.div(capture(&block) + help_text, class: form_group_control_class(options)))
elsif options[:layout] == :floating
concat(capture(&block))
concat(label)
concat(help_text) if help_text
else
concat(label)
concat(capture(&block))
concat(help_text) if help_text
end
end
end
end
@istvanp
Copy link
Author

istvanp commented Aug 28, 2020

Steps:

  1. Create the file above
  2. Make sure you use the extra CSS needed like in the v5 docs floating labels example.
  3. In your form, set the bootstrap_form layout to :floating:
<%= bootstrap_form_for(@user, layout: :floating) do |f| %>
  <%= f.email_field :email, autofocus: true, autocomplete: "email", placeholder: "Email" %>
  <%= f.password_field :password, autocomplete: "current-password", placeholder: "Password" %>
  <%= f.primary "Log in" %>
<% end %>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment