Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bootstrap v4

See original GitHub issue

Some random stuff useful for Bootstrap v4

Simple Form configuration:

# frozen_string_literal: true

# Use this setup block to configure all options available in SimpleForm.
SimpleForm.setup do |config|
  config.error_notification_class = 'alert alert-danger'
  config.button_class = 'btn btn-primary'
  config.boolean_label_class = nil

  config.wrappers :vertical_form, tag: 'div', class: 'form-group', error_class: 'has-danger' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :pattern
    b.optional :min_max
    b.optional :readonly
    b.use :label, class: 'form-control-label'

    b.use :input, class: 'form-control'
    b.use :error, wrap_with: { tag: 'div', class: 'form-control-feedback' }
    b.use :hint,  wrap_with: { tag: 'small', class: 'form-text text-muted' }
  end

  config.wrappers :vertical_file_input, tag: 'div', class: 'form-group', error_class: 'has-danger' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :readonly
    b.use :label, class: 'form-control-label'

    b.use :input
    b.use :error, wrap_with: { tag: 'div', class: 'form-control-feedback' }
    b.use :hint,  wrap_with: { tag: 'small', class: 'form-text text-muted' }
  end

  #   config.wrappers :vertical_boolean, tag: 'div', class: 'form-group', error_class: 'has-danger' do |b|
  #     b.use :html5
  #     b.optional :readonly
  #
  #     b.wrapper tag: 'div', class: 'checkbox' do |ba|
  #       ba.use :label_input
  #     end
  #
  #     b.use :error, wrap_with: { tag: 'div', class: 'form-control-feedback' }
  #     b.use :hint,  wrap_with: { tag: 'small', class: 'form-text text-muted' }
  #   end

  config.wrappers :vertical_boolean, tag: 'div', class: 'form-group', error_class: 'has-danger' do |b|
    b.use :html5
    b.optional :readonly

    b.wrapper tag: 'label', class: 'custom-control custom-checkbox' do |ba|
      ba.use :input, class: 'custom-control-input'
      ba.wrapper tag: 'span', class: 'custom-control-label' do |bb|
        bb.use :label_text
      end
    end

    b.use :error, wrap_with: { tag: 'div', class: 'form-control-feedback' }
    b.use :hint,  wrap_with: { tag: 'small', class: 'form-text text-muted' }
  end

  config.wrappers :vertical_radio_and_checkboxes, tag: 'div', class: 'form-group', error_class: 'has-danger' do |b|
    b.use :html5
    b.optional :readonly
    b.use :label, class: 'form-control-label'
    b.use :input
    b.use :error, wrap_with: { tag: 'div', class: 'form-control-feedback' }
    b.use :hint,  wrap_with: { tag: 'small', class: 'form-text text-muted' }
  end

  config.wrappers :horizontal_form, tag: 'div', class: 'form-group', error_class: 'has-danger' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :pattern
    b.optional :min_max
    b.optional :readonly
    b.use :label, class: 'col-sm-3 control-label'

    b.wrapper tag: 'div', class: 'col-sm-9' do |ba|
      ba.use :input, class: 'form-control'
      ba.use :error, wrap_with: { tag: 'div', class: 'form-control-feedback' }
      ba.use :hint,  wrap_with: { tag: 'small', class: 'form-text text-muted' }
    end
  end

  config.wrappers :horizontal_file_input, tag: 'div', class: 'form-group', error_class: 'has-danger' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :readonly
    b.use :label, class: 'col-sm-3 control-label'

    b.wrapper tag: 'div', class: 'col-sm-9' do |ba|
      ba.use :input
      ba.use :error, wrap_with: { tag: 'div', class: 'form-control-feedback' }
      ba.use :hint,  wrap_with: { tag: 'small', class: 'form-text text-muted' }
    end
  end

  config.wrappers :horizontal_boolean, tag: 'div', class: 'form-group', error_class: 'has-danger' do |b|
    b.use :html5
    b.optional :readonly

    b.wrapper tag: 'div', class: 'col-sm-offset-3 col-sm-9' do |wr|
      wr.wrapper tag: 'div', class: 'checkbox' do |ba|
        ba.use :label_input
      end

      wr.use :error, wrap_with: { tag: 'div', class: 'form-control-feedback' }
      wr.use :hint,  wrap_with: { tag: 'small', class: 'form-text text-muted' }
    end
  end

  config.wrappers :horizontal_radio_and_checkboxes, tag: 'div', class: 'form-group', error_class: 'has-danger' do |b|
    b.use :html5
    b.optional :readonly

    b.use :label, class: 'col-sm-3 control-label'

    b.wrapper tag: 'div', class: 'col-sm-9' do |ba|
      ba.use :input
      ba.use :error, wrap_with: { tag: 'div', class: 'form-control-feedback' }
      ba.use :hint,  wrap_with: { tag: 'small', class: 'form-text text-muted' }
    end
  end

  config.wrappers :inline_form, tag: 'div', class: 'form-group', error_class: 'has-danger' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :pattern
    b.optional :min_max
    b.optional :readonly
    b.use :label, class: 'sr-only'

    b.use :input, class: 'form-control'
    b.use :error, wrap_with: { tag: 'div', class: 'form-control-feedback' }
    b.use :hint,  wrap_with: { tag: 'small', class: 'form-text text-muted' }
  end

  config.wrappers :multi_select, tag: 'div', class: 'form-group', error_class: 'has-danger' do |b|
    b.use :html5
    b.optional :readonly
    b.use :label, class: 'form-control-label'
    b.wrapper tag: 'div', class: 'form-inline' do |ba|
      ba.use :input, class: 'form-control'
      ba.use :error, wrap_with: { tag: 'div', class: 'form-control-feedback' }
      ba.use :hint,  wrap_with: { tag: 'small', class: 'form-text text-muted' }
    end
  end
  # Wrappers for forms and inputs using the Bootstrap toolkit.
  # Check the Bootstrap docs (http://getbootstrap.com)
  # to learn about the different styles for forms and inputs,
  # buttons and other elements.
  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
# rubocop:enable Metrics/BlockLength

Javascript file for horizontal form:

ClientSideValidations.formBuilders['SimpleForm::FormBuilder'].wrappers.horizontal_form =
  add: (element, settings, message) ->
    wrapper = element.closest("#{settings.wrapper_tag}.#{settings.wrapper_class.replace(/\ /g, '.')}")
    errorWrapper = element.closest("#{settings.wrapper_tag}[class^=\"col-\"]")
    errorElement = wrapper.find("#{settings.error_tag}.#{settings.error_class.replace(/\ /g, '.')}")
    unless errorElement.length
      errorElement = $("<#{settings.error_tag}/>", { class: settings.error_class, text: message })
      errorWrapper.append(errorElement)
    element.addClass(settings.wrapper_error_class)
    errorElement.text(message)
  remove: (element, settings) ->
    wrapper = element.closest("#{settings.wrapper_tag}.#{settings.wrapper_class.replace(/\ /g, '.')}")
    errorWrapper = element.closest("#{settings.wrapper_tag}[class^=\"col-\"]")
    errorElement = errorWrapper.find("#{settings.error_tag}.#{settings.error_class.replace(/\ /g, '.')}")
    element.removeClass(settings.wrapper_error_class)
    errorElement.remove()

Issue Analytics

State:
Created 6 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

7reactions

taglialacommented, Jul 24, 2018

Working for Bootstrap 4.1 and default simple form initialization file

Please add this to a coffee file, after rails.validations and rails.validations.simple_form

ClientSideValidations.formBuilders['SimpleForm::FormBuilder'].wrappers.default =
  add: (element, settings, message) ->
    wrapperElement = element.closest("#{settings.wrapper_tag}.#{settings.wrapper_class.replace(/\ /g, '.')}")
    errorElement   = wrapperElement.find("#{settings.error_tag}.invalid-feedback")

    unless errorElement.length
      errorElement = $("<#{settings.error_tag}/>", { class: 'invalid-feedback', text: message })
      wrapperElement.append errorElement

    wrapperElement.addClass settings.wrapper_error_class
    element.addClass 'is-invalid'

    errorElement.text message

  remove: (element, settings) ->
    wrapperElement = element.closest("#{settings.wrapper_tag}.#{settings.wrapper_class.replace(/\ /g, '.')}.#{settings.wrapper_error_class}")
    errorElement   = wrapperElement.find("#{settings.error_tag}.invalid-feedback")

    wrapperElement.removeClass settings.wrapper_error_class
    element.removeClass 'is-invalid'

    errorElement.remove()

1reaction

patrickoramahcommented, Jul 24, 2018

@tagliala You’re my hero

Top Results From Across the Web

Introduction

Get started with Bootstrap, the world's most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

Bootstrap 4 Get Started

Bootstrap is a free front-end framework for faster and easier web development · Bootstrap includes HTML and CSS based design templates for typography,...

BootstrapVue

Quickly integrate Bootstrap v4 components with Vue.js.

bootstrap-v4-rtl

bootstrap -v4-rtl. 4.6.2-1 • Public • Published 4 months ago. Readme · Code Beta · 0 Dependencies · 11 Dependents · 17 Versions ......

Bootstrap 4 Cheat Sheet - The ultimate list of ...

Quickly find your Bootstrap classes on this interactive Bootstrap cheat sheet. It includes code samples and live preview of elements.