How to align 2 collection dropdown’s in simple_form and make them inline [ drop 1] [ drop 2]
The example on :
http://simple-form-bootstrap.plataformatec.com.br/articles/new
Shows how to align checkboxes and radiobuttions,
but im unable no matter what I try to align 2 collection dropdowns inline after each other.
Tried all solutions I could find here and online with wrapper inline, class inline etc. nothing works 🙁
= f.input :age_from,
:collection => 18..60,
:selected => 18,
:label => 'Age from',
:style => "width: 85px !important"
= f.input :age_to,
:collection => 18..60,
:selected => 55,
:label => 'Age to',
:style => "width: 85px !important"
HTML:
<form accept-charset="UTF-8" action="/sessions" class="simple_form form-horizontal" id="new_session" method="post" novalidate><div style="margin:0;padding:0;display:inline"></div>
<div class="control-group select required"><div class="controls"></div></div>
<div class='ruler'></div>
<div class="control-group select optional"><label class="select optional control-label" for="session_age_from">Age from</label><div class="controls"><select class="select optional" id="session_age_from" name="session[age_from]"><option value="18" selected="selected">18</option>
<option value="60">60</option></select></div></div>
<div class="control-group select optional"><label class="select optional control-label" for="session_age_to">Age to</label><div class="controls"><select class="select optional" id="session_age_to" name="session[age_to]"><option value="18">18</option>
<option value="55" selected="selected">55</option>
<option value="60">60</option></select></div></div>
<div class='ruler'></div>
<div class="control-group string optional"></div>
</form>
CSS:
.form-search input, .form-search textarea, .form-search select, .form-search .help-inline, .form-search .uneditable-input, .form-search .input-prepend, .form-search .input-append, .form-inline input, .form-inline textarea, .form-inline select, .form-inline .help-inline, .form-inline .uneditable-input, .form-inline .input-prepend, .form-inline .input-append, .form-horizontal input, .form-horizontal textarea, .form-horizontal select, .form-horizontal .help-inline, .form-horizontal .uneditable-input, .form-horizontal .input-prepend, .form-horizontal .input-append {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
select {
background-color: #FFFFFF;
border-style: solid;
border-width: 1px;
}
select {
margin: 0.5em 0;
}
select {
background-color: #FFFFFF;
border: 1px solid #BBBBBB;
width: 220px;
}
select, input[type="file"] {
height: 30px;
line-height: 30px;
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
border-radius: 3px 3px 3px 3px;
color: #555555;
display: inline-block;
font-size: 14px;
height: 20px;
line-height: 20px;
margin-bottom: 9px;
padding: 4px 6px;
}
input, button, select, textarea {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
label, input, button, select, textarea {
font-size: 14px;
font-weight: normal;
line-height: 20px;
}
button, input, select, textarea {
font-size: 100%;
margin: 0;
vertical-align: middle;
}
One option is to just use the bootstrap layout div tags like so to align them. I use span3 bc my total form is span6 but you can modify that as you need.