Nano Hash - криптовалюты, майнинг, программирование

Как выровнять ввод и метку из collection_check_boxes?

Я использую collection_check_boxes и у меня проблемы с выравниванием флажка и текста. Это мой код:

<div class="col-md-4">
  <%= f.collection_check_boxes :dog_ids, Dog.all, :id, :name %>
</div>

Форма отображается так:

[checkbox1]
  text1

[checkbox2]
  text2

[checkbox3]
  text3

Я пытаюсь выровнять ввод и метку, но безуспешно. Я видел этот вопрос, но он у меня не работает: Выровняйте флажки для f.collection_check_boxes с Simple_Form

Я хочу выполнить это:

[checkbox1] text1

[checkbox2] text2

[checkbox3] text3

Спасибо за помощь!

ruby-on-rails checkbox css twitter-bootstrap ruby-on-rails-4
08.06.2014

  • ‹div class=row›‹div class=col-xs-4›[checkbox1]‹/div›‹div class=col-xs-8›text1‹/div›‹/div› 08.06.2014
  • @ Octopus-Paul, спасибо, но как применить это к collection_check_boxes? 08.06.2014

Ответы:


1

Определение для collection_check_boxes:

collection_check_boxes(object, method, collection, value_method, text_method, options = {}, html_options = {}, &block)

Последний аргумент позволяет вам сделать что-то вроде этого: (это делает именно то, что вы хотите, используя collection_check_boxes)

<%= f.collection_check_boxes(:dog_ids, Dog.all, :id, :name) do |b| %>
  <div class="row">
    <%= b.label(class: "check_box") do %>
      <div class="col-xs-4">
        <%= b.check_box(class: "check_box") %>
      </div>

      <div class="col-xs-8">
        <%= b.object.name %>
      </div>       
    <% end %>
  </div>
<% end %>

Подробнее о коллекциях_check_box

Есть и другой метод: стиль ввода флажка и метки из css.

Для лучшей специфичности CSS я добавлю новый класс с именем «список флажков» в:

<div class="col-md-4 checkbox-list">
  <%= f.collection_check_boxes :dog_ids, Dog.all, :id, :name %>
</div>

.checkbox-list input[type="checkbox"] {
  display: inline-block;
  width: 10%;
}

.checkbox-list input[type="checkbox"] + label {
  display: inline-block;
  margin-left: 10%;
  width: 80%;
}
08.06.2014
  • Спасибо! Это выглядит великолепно для меня. Единственное, я не знаю, почему это говорит это: unexpected ',', expecting ')' для этой части: :dog_ids, Dog.all 09.06.2014
  • Попробуйте сейчас, пожалуйста. Я сделал небольшое изменение 09.06.2014
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..