Skip to content

Instantly share code, notes, and snippets.

@anlek
Last active April 30, 2020 13:51
Show Gist options
  • Star 11 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anlek/50e2e464cdfef44a86f105210e76dcca to your computer and use it in GitHub Desktop.
Save anlek/50e2e464cdfef44a86f105210e76dcca to your computer and use it in GitHub Desktop.
My current work around for simple_form and Bootstrap 4 beta to work together (till simple_form allows input fields to have `is-invalid` set on it on error - see https://github.com/plataformatec/simple_form/pull/1476)
// Fix for validations on simple form
// Need to import bootstrap functions and mixins if you want to dynamically set colors
// Otherwise replace theme-color... with hex color
@import 'bootstrap/functions';
@import 'bootstrap/variables';
@import 'bootstrap/mixins';
.has-invalid {
.invalid-feedback {
display: block;
}
label {
color: theme-color('danger');
}
.form-control {
background: theme-color-level('danger', -10);
border-color: theme-color('danger');
}
}
# 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-default'
config.boolean_label_class = nil
config.wrappers :vertical_form, tag: 'div', class: 'form-group', error_class: 'has-invalid' 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: 'control-label'
b.use :input, class: 'form-control'
b.use :error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
b.use :hint, wrap_with: { tag: 'small', class: 'text-muted' }
end
config.wrappers :vertical_file_input, tag: 'div', class: 'form-group', error_class: 'has-invalid' do |b|
b.use :html5
b.use :placeholder
b.optional :maxlength
b.optional :readonly
b.use :label, class: 'control-label'
b.use :input
b.use :error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
b.use :hint, wrap_with: { tag: 'small', class: 'text-muted' }
end
config.wrappers :vertical_boolean, tag: 'div', class: 'form-group', error_class: 'has-invalid' 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: 'invalid-feedback' }
b.use :hint, wrap_with: { tag: 'small', class: 'text-muted' }
end
config.wrappers :vertical_radio_and_checkboxes, tag: 'div', class: 'form-group', error_class: 'has-invalid' do |b|
b.use :html5
b.optional :readonly
b.use :label, class: 'control-label'
b.wrapper tag: 'div', class: 'd-flex flex-column-reverse' do |ba|
ba.use :input
ba.use :error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
ba.use :hint, wrap_with: { tag: 'small', class: 'text-muted' }
end
end
config.wrappers :horizontal_form, tag: 'div', class: 'form-group', error_class: 'has-invalid' 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: 'invalid-feedback' }
ba.use :hint, wrap_with: { tag: 'small', class: 'text-muted' }
end
end
config.wrappers :horizontal_file_input, tag: 'div', class: 'form-group', error_class: 'has-invalid' 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: 'invalid-feedback' }
ba.use :hint, wrap_with: { tag: 'small', class: 'text-muted' }
end
end
config.wrappers :horizontal_boolean, tag: 'div', class: 'form-group', error_class: 'has-invalid' 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, class: 'col-sm-9'
end
wr.use :error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
wr.use :hint, wrap_with: { tag: 'small', class: 'text-muted' }
end
end
config.wrappers :horizontal_radio_and_checkboxes, tag: 'div', class: 'form-group', error_class: 'has-invalid' 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: 'invalid-feedback' }
ba.use :hint, wrap_with: { tag: 'small', class: 'text-muted' }
end
end
config.wrappers :inline_form, tag: 'div', class: 'form-group', error_class: 'has-invalid' 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: 'invalid-feedback' }
b.use :hint, wrap_with: { tag: 'small', class: 'text-muted' }
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
}
end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment