Creazione di elenchi a discesa date_select inline utilizzando simple_form e zurb foundation

Question

Sto utilizzando Simple_Form con Zurb Foundation nella mia applicazione di rails.

Uno dei più viste ha una forma con i seguenti campi date_select

La forma vengono visualizzati impilati anziché linea. Ho controllato tutto e non riesco a capire come farlo visualizzare correttamente.

Cosa mi manca? È possibile visualizzare il repository al numero https://github.com/stanrails/momtomom nella vista event.html.erb.

Il codice per la sezione è qui sotto:

<div class="row"> 
     <div class="small-5 columns"> 
      <%= f.date_select :eventDate %> 
     </div> 
    </div> 

Answer 1

Una delle soluzione è di avere qualcosa manualmente come questo:

form.custom .dropdown.date{ 
    width: 30%; 
    margin-right: 10px; 
    float: left; 
} 

Answer 2

Ecco un altro assumere questo ho voluto condividere che finisce per guardare in questo modo:

A Li html sottile!

div[class="row"] 
    div[class="large-12 columns select-date-wrapper"] 
     = f.date_select(:birthdate, 
      options = { start_year: DateTime.now.year - 18, end_year: DateTime.now.year - 75, order: [:month, :day, :year], include_blank: true}, 
      html_options = { class: 'select-date'}) 

Un piccolo sass!

select.select-date { 
    width: 30%; 
    margin-right: 10px; 
    float: left; 
} 
.select-date-wrapper{ 
    select:first-of-type{ 
    width: 45%; 
    } 
    select:nth-of-type(2){ 
    width: 20%; 
    } 
    select:last-of-type{ 
    margin-right: 0; 
    } 
} 

Answer 3

ho risolto lo stesso problema controllando l'html e cambiare il css dei tag rilevanti:

<%= f.date_select :date %> produce:

<div class="field col-md-6"> 
    <select id="invoice_date_1i" name="invoice[date(1i)]"> 
    <select id="invoice_date_2i" name="invoice[date(2i)]"> 
    <select id="invoice_date_3i" name="invoice[date(3i)]"> 
</div> 

Con "Fattura" è il nome del modello qui. Pertanto, nel tuo css puoi aggiungere

#yourModel_date_1i, #yourmodel_date_2i, #yourmodel_date_3i { width: 30%; } 

per una soluzione facile.