Изменение макета Formtastic

Я совершенно новичок в formtastic и довольно неопытен, когда дело доходит до CSS и таблиц стилей.

Я пытаюсь изменить свой макет, чтобы он выглядел как нижняя часть этого изображения: http://img242.imageshack.us/img242/3971/layoutiy.jpg Как видите, мне удалось чтобы выпадающие списки были хорошо выровнены, но не часы оплаты / консультанта.

Это мой файл .erb;

<div id="defaults">
    <% semantic_form_for <more stuff goes here> %>
    ......
    <div id="customer-details">
        <%= form.input :fee %>
        <%= form.input :consultant_hours %>

        <%= form.input :automatic_prolonging, :as => :radio, :collection => [[("Yes"), "true" ]] + [[("No"), 'false']], :wrapper_html => { :class => "compact" } %>
        <%= form.input :customer_segment, :as => :radio, :collection => [[("Industry"), "Industry" ]] +[[("Bank/Finance"), "Bank/Finance" ]] + [[("Products/Services"), 'Products/Services']]+ [[("Organization"), 'Organization']]+[[("Other"), 'Other']], :wrapper_html => { :class => "compact" } %>
    </div>
    <% end %>

Я отредактировал свой файл formtastic_changes.css следующим образом:

#customer-details li{
    clear: none;
    float: left;
    padding: 0;
    height: 60px;
    margin-right: 40px;
}

#customer-details .compact ol li, #social-post-defaults .compact ol li,
#customer-details .compact ol, #social-post-defaults .compact ol {
    width: 220px !important; 
    height: auto !important;
}

#customer-details .compactSelect, #social-post-defaults .compactSelect {
    width: 160px !important;
}

#customer-details .compactSelect ol, #social-post-defaults .compactSelect ol {
    width: 220px !important;
}

#customer-details .compactSelect .field, 
#social-post-defaults .compactSelect .field {
    width: 146px !important;
}

#customer-details .compactSelect ol li, 
#social-post-defaults .compactSelect ol li {
    width: 160px;
    height: auto !important;
    white-space: nowrap;
}

#customer-details .string input {
    width: 285px;
    margin: 2px 0 5px;
    padding: 2px;
    font-size: 13px;
}

И в этом проблема. Сколько бы я ни менял атрибут ширины, ничего не меняется. Если я удаляю «.string», изменение ширины работает, но поля по-прежнему не выравниваются рядом друг с другом, а друг над другом/под ним.

Я просмотрел оба учебника Formtastic по рельсовым кастам и просмотрел Rdoc Formtastic, но, похоже, я все еще не могу решить эту проблему.

Может ли кто-нибудь подтолкнуть меня в правильном направлении? Благодарен за любую помощь.


ruby-on-rails css stylesheet formtastic
person Soroush Hakami    schedule 16.11.2010    source источник
comment
В качестве предложения изложите свой вопрос чуть раньше, а не прячьте его в кучу текста. Кроме того, можете ли вы добавить, как именно выглядит сгенерированный HTML?   -  person raidfive    schedule 17.11.2010

Ответы (1)


arrow_upward
2
arrow_downward

@Эмиль: попробуй

#customer-details input {
    float: left;
    font-size: 13px;
    margin: 2px 0 5px;
    padding: 2px;
    width: 285px;
}
person stealthyninja    schedule 16.11.2010
comment
Спасибо за ответ! Когда я пробовал, это выглядело так: img529.imageshack.us/img529/2467/layout2png .png До сих пор не знаю, почему они не выравниваются рядом друг с другом... - person Soroush Hakami; 16.11.2010