Простой ввод формы как float добавить класс float

Question

Я не могу понять, какова цель упоминания класса с плавающей точкой для вывода HTML-кода. Проблема, с которой я столкнулся из-за этой функции рельса, заключается в том, что следующий элемент идет рядом с ним, а не идет сразу после него.Есть ли простой способ исправить это вместо использования JQuery или перезаписать InPPUT для отображения его в виде целого числа / строки .. Чтобы удалить этот класс с плавающей точкой .. Пожалуйста, ответьте как можно скорее .. :as=>:float необходимо изменить на :as=>:string Спасибо ..

 <%= f.association :resource, :required=>:true, %>
      <%= f.input :join_date,:as=>:string,  :required=>:true, :input_html=>{:class=>'datepicker'} %>
      <%= f.association :resource_role, :required=>:true, :label=>"Role" %>
      <%= f.association :resource_billing_type, :required=>:true, :label=>"Billing Type"  %>
      <%= f.input :billing_rate, :as=>:float, :required=>:true, %>

Answer 1

:as=>:float не имеет ничего общего с css, он используется для указания того, что тип ввода будет числом с плавающей запятой (это так, что простая форма может выполнять некоторые проверки ввода пользователя).

Что вам нужно посмотреть, так это тег по умолчанию, который простая форма помещает вокруг элементов CSS, который, вероятно, является div по умолчанию. Таким образом, проблему можно решить с помощью CSS или изменив его на тег абзаца с помощью:

SimpleForm.wrapper_tag = :p

Если вам нужен быстрый взлом, чтобы исправить это, я думаю, вы можете просто добавить html-тег разрыва строки.

Answer 2

Использование поплавков в формах довольно распространено.

Обычно ваша кнопка имеет левое поле, равное ширине меток.

Я предполагаю, что ваша метка + поля ввода находятся либо внутри li, либо div блоков.

Я предполагаю, что ваша кнопка отправки также должна быть внутри такого li или div, а этого нет.

Answer 3

Я согласен с другими, что просмотр вывода html и кода css облегчил бы ответ на этот вопрос. Я предполагаю, что у вас есть CSS с надписью "float: left;" и что после этого и перед кнопкой сохранения и отмены вам нужно просто добавить div с «clear: both;» как CSS. Тогда кнопки отправки и отмены опустятся ниже.

Также возможно, что вы могли бы удалить поплавок и просто использовать относительное позиционирование для тарифа расчета.

Answer 4

Вы можете сделать что-то вроде:

input[type="text"] {
  clear: right;
}

Убедившись, что ничто не всплывает справа от элементов ввода с типом text.