Простая форма - контроль ширины метки и ввода (с начальной загрузкой) - PullRequest
Новая
       35

Простая форма - контроль ширины метки и ввода (с начальной загрузкой)

1 голос
/ 10 марта 2019

Я использую Simple_form и Bootstrap.

Я хотел бы использовать горизонтальную оболочку, но мне нужно сделать метку шире, а входной - уже.Я хотел бы сделать это с начальной загрузкой 4 против пользовательского css.

Метка и ввод должны быть на одной строке (в строке) и выровнены по правому краю.

col-md-8 для меткии col-md-4 для ввода.Как мне это сделать? 

 <%= f.input :role, :wrapper =>:horizontal_range, input_wrapper_html: { class: "col-md-4"}, label_wrapper_html: {class: "col-md-8"} %>

РЕДАКТИРОВАТЬ: я должен добавить, что роль f.input: содержится в 

<div class='row'>
  <div class='col-md-6"> 
      f.input :role 
  </div>
</div>

Second,

Мне нужнодобавить% в конце моего ввода.Тем не менее, это не похоже на работу. 

 <%= f.input :pct_of_car , append: "%",  :wrapper =>:horizontal_range %>

Однако, похоже, это не работает.Что не так с моим синтаксисом?

В-третьих, как изменить вертикальный collection_inline таким образом, чтобы он содержал 2 или 3 столбца? 

  # vertical input for inline radio buttons and check boxes
  config.wrappers :bs_vertical_collection_inline, item_wrapper_class: 'form-check form-check-inline', tag: 'fieldset', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
    b.use :html5
    b.optional :readonly
    b.wrapper :legend_tag, tag: 'legend', class: 'col-form-label pt-0' do |ba|
      ba.use :label_text
    end
    b.use :input, class: 'form-check-input', error_class: 'is-invalid', valid_class: 'is-valid'
    b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback d-block' }
    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
  end

В настоящее время все флажки перечислены встроенными и не имеют структуры.Мне нужно перечислить варианты в 2 или 3 столбцах, чтобы их было легче читать.Это также длинный список, поэтому может потребоваться обернуть варианты в поле прокрутки.

Ответы [ 2 ]

2 голосов
/ 14 марта 2019

Вам необходимо определить свою собственную пользовательскую оболочку или изменить стандартные.

Во-первых, убедитесь, что в вашем хранилище есть обертки по умолчанию.

Запустите rails g simple_form:install --bootstrap, если не можете найти app/initializers/simple_form_bootstrap.rb.

Во-вторых, найдите классы сетки Bootstrap в этом инициализаторе. Для горизонтальной формы они находятся в блоке, который выглядит следующим образом: 

config.wrappers :horizontal_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :minlength
    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: 'span', class: 'help-block' }
      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
    end
  end

В-третьих, поменяйте оболочку!

В этом фрагменте измените col-sm-9 на col-sm-8. Также измените col-sm-3 на col-sm-4.

Завершение

Сохранить. Перезагрузите сервер Rails. Теперь все формы будут иметь метки шириной 33% и значения ширины 66%.

Если вы не хотите применять это глобально, передайте параметр wrapper: :my_wrapper любому input и создайте новую пользовательскую оболочку, которая будет делать то, что вы хотите.

Должен любить SimpleForm!

2 голосов
/ 12 марта 2019

Чтобы установить класс для input и label, используйте input_html и label_html: 

<%= f.input :role, :wrapper => :horizontal_range, input_html: { class: "col-md-4"}, label_html: {class: "col-md-8"} %>

Что касается второго вопроса - если вы не используете подсказки, возможно, самое простое решениебыло бы сделать это так: 

<%= f.input :pct_of_car , hint: "%",  :wrapper =>:horizontal_range %>

Затем вы можете стилизовать его, добавив в подсказку собственный класс с опцией hint_html (аналогично input_html и label_html).

Обновление

Лучшим решением для добавления пользовательского текста является использование блока для ввода: 

<%= f.input(:role, :wrapper => :horizontal_range, label_html: {class: "col-md-8"}) do %>
  <div class='col-md-4'>
    <%= f.input(:role, components: [:input], :wrapper => false, label: false) %>
    <span>%</span>
  </div>
<% end %>

Благодаря этому ваша метка имеет класс col-md-8 и вводится с помощьюваш текст обернут в div с col-md-4 class.

...