formtastic вопрос о макете семантической формы

В formtastic при создании семантической формы расположение атрибутов объекта всегда перечисляется вертикально (одна метка и значение атрибута занимают одну строку) по умолчанию.

Как настроить макет так, чтобы часть атрибутов находилась в горизонтальном положении. Например, я бы хотел, чтобы атрибут "body" располагался справа от "title". Как это сделать?

<% semantic_form_for @post do |form| %>
    <% form.inputs do %>
      <%= form.input :title %>
      <%= form.input :body %>
      <%= form.input :section, :as => :radio %>
      ...

ruby-on-rails ruby-on-rails-3 formtastic
person Mellon    schedule 04.04.2011    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Вы можете использовать CSS для выполнения этой задачи:

<%= form.input :title, :wrapper_html => {:class => "left"} %>

Затем в вашей таблице стилей:

.left
{
  float: left;
  /* etc. */
}

Это стилизует контейнер элемента формы (по умолчанию li).

person Ant    schedule 04.04.2011
comment
пожалуйста, не используйте встроенные стили. просто назначьте класс/идентификатор и стилизуйте его, используя внешнюю таблицу стилей. - person corroded; 04.04.2011
comment
Я согласен с тем, что вышеприведенное можно использовать только в качестве примера. На самом деле я отредактирую свой ответ. - person Ant; 04.04.2011
comment
Я пытался, но это не работает, например, я хотел бы, чтобы «раздел» располагался справа от «тела», я использовал ‹%= form.input :section, :wrapper_html =› {:class =› слева } %›, а в файле css я определил .left { float: left; } - person Mellon; 04.04.2011
comment
Тогда вам нужно плавать влево, а не в раздел. - person Ant; 04.04.2011

arrow_upward
1
arrow_downward

Formtastic предоставляет множество HTML-перехватчиков class и id в оболочке <li> и в других местах, чтобы вы могли стилизовать различные типы входных данных в целом (например, li.string) или отдельные входные данные по-разному (например, li#user_email_input).

Вы можете, как упоминалось в других ответах, добавить дополнительные классы в оболочку с помощью :wrapper_html => { :class => 'whatever' }, чтобы дать себе новые крючки, когда приведенные выше варианты не подходят.

Отсюда это чисто проблема стиля/CSS. Вы, вероятно, захотите сместить <li> оболочки друг против друга с помощью float:left;, а затем очистить плавающие объекты в содержащем <ol> с помощью overflow:auto; или любой другой техники очистки по вашему выбору.

person Justin French    schedule 06.04.2011

arrow_upward
0
arrow_downward

Вам просто нужно изменить CSS. Однако я предлагаю вам просто создать элементы формы самостоятельно, если вам нужна настройка макета для определенных атрибутов.

person Jeffrey W.    schedule 04.04.2011