当前位置: 动力学知识库 > 问答 > 编程问答 >

ruby on rails - Rearranging Formtastic layout

问题描述:

I'm completely new to formtastic and pretty unexperienced when it comes to CSS and stylesheets.

I'm trying to rearrange my layout to look like the bottom of this picture:

As you can see I managed to make the dropdowns align nicely, but not the Fee/Consultant Hours.

This is my .erb file;

<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 %>

I edited my formtastic_changes.css file as follows:

#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;

}

And this is the problem. No matter how much I change the width attribute, nothing changes.

If I remove the ".string", the width changing works, but the fields still don't align next to each other but over/under each other.

I've watched both Formtastic tutorials on railcasts and looked through the formtastic Rdoc but I still don't seem able to solve this problem.

Can anyone nudge me in the right direction?

Thankful for any help.

网友答案:

@Emil: Try

#customer-details input {
    float: left;
    font-size: 13px;
    margin: 2px 0 5px;
    padding: 2px;
    width: 285px;
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: