Soroush Hakami Soroush Hakami - 5 months ago 23
CSS Question

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:
http://img242.imageshack.us/img242/3971/layoutiy.jpg
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.

Answer

@Emil: Try

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