Inline date_select dropdowns mit simple_form und zurb foundation erstellen

Question

Ich verwende Simple_Form mit Zurb Foundation in meiner Rails-Anwendung.

Eine weitere Ansichten hat eine Form mit folgenden date_select

Die Formularfelder eher gestapelt sind, zeigt sich als Inline. Ich habe alles überprüft und kann nicht herausfinden, wie man diese richtig aufstellen kann.

Was fehlt mir? Sie können das Repo unter https://github.com/stanrails/momtomom in der Ansicht event.html.erb sehen.

Der Code für den Abschnitt ist unten:

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

Answer 1

Einer der Abhilfe ist, etwas von Hand wie diese haben:

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

Answer 2

Hier ist ein weiteres auf das nehme ich teilen wollte, welche Enden aussehen wie folgt aus:

A li thtle html!

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'}) 

Ein wenig 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

löste ich das gleiche Problem, indem Sie die HTML-Überprüfung und die CSS der relevanten Tags zu ändern:

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

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

Mit "Rechnung" der Name hier Modell zu sein. Daher können Sie

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

in Ihrem css für eine einfache Lösung hinzufügen.