Foundation, einfache form, einen text, Spalten

Ich habe eine Zurb Foundation einfaches Formular mit einem Feld (:Beschreibung) - text-Bereich. Ich möchte den text-Bereich werden 10 Reihen tief, aber es scheint als 2 Zeilen. Wer weiß, wie dies zu ändern?

<div class="row">
  <div class="large-4 large-centered columns">
    <%= simple_form_for(@venue) do |f| %>
      <fieldset>
        <%= f.input :name %>
        <%= f.input :url %>
        <%= f.input :street %>
        <%= f.input :city %>
        <%= f.input :state %>
        <%= f.input :description, as: :text, :input_html => { :cols => 5, :rows => 10 } %>
        <%= f.submit "Submit", class: "button small radius" %>
      </fieldset>
    <% end %>
  </div>
</div>

InformationsquelleAutor mikeglaz | 2013-07-04

  1. 9

    Da man sich mit bootstrap -, Standard-Eigenschaften von bootstrap für Ihre input textarea. Es verursacht das problem. Ich hatte das gleiche problem, aber mit Spalten.

    Können Sie dieses problem umgehen, indem Sie zwei Lösungen:

    1.) Erstellen Sie eine Klasse und geben Sie die Höhe und Breite auf auto sein. Verwenden Sie die Klasse wo es erforderlich ist.

    Erstellen, die diese Klasse in Ihrer Anwendung.css oder irgendwelche css-Datei.

    .test
{
width: auto;
height: auto;
}

    Nun diese Klasse in Ihren ruby-code.

     <%= f.input :description, as: :text, :input_html => { class: 'test', :cols => 5, :rows => 10 } %>

    Da Sie explizit die Breite und Höhe werden automatisch die bootstrap - textarea-Breite, Höhe wird overrided durch die lokale Klasse 'test' Breite und Höhe.
    Daher :cols => 5, :Zeilen => 10 Eigenschaften festgelegt werden.

    2.) Ändern Sie die input-textarea-Eigenschaften in der bootstrap-css-Datei.
    Ändern Sie die Höhe oder die Breite des input-textarea zu auto um zu vermeiden, Verwechslungen oder legen Sie es auf eine standard-pixel, wenn Sie gehen, um die gleiche Breite und Höhe überall.

    eigentlich, dass mein text-Bereich, um die Hälfte der Breite des Containers.
    Ändern Sie das bootstrap-css(wenn Sie die Breite und Höhe auf auto) wird standardmäßig alle, die die textarea-Komponente, um die Hälfte der Breite des Containers. Weil es explizit ignoriert die Standard-bootstrap-css-definition. Versuchen Sie, die erste Lösung. So dass Sie immer verwenden Sie die Standard-bootstrap-Eigenschaften und für bestimmte Fälle können Sie überschreiben, indem Sie die Klasse explizit, wie gezeigt, in Lösung 1.
    Ich bin mit Schritt #1. Lege ich nicht :cols-Attribut und meine :Beschreibung, ist die Hälfte der Breite von meinem container.
    So heben Sie die Auskommentierung der Breite werden automatisch in die neue Klasse. So dass es 'll nehmen Sie die default-bootstrap-Breite n daher Ihre text-Bereich werden nicht die Hälfte der container. In den oben genannten Szenario habe ich overrided sowohl die Breite n der Höhe von bootstrap. In ur den Fall u kann das tun Höhe allein.. Ex: .test{height:auto;}
    FWIW, die OP ist mit Zurb Foundation, Bootstrap nicht. Aber die Lösung ist die gleiche.

    InformationsquelleAutor Amarnath Krishnan

  2. 3

    die class-Zuweisung nicht funktioniert , versuchen Sie dies statt

    =f.input :description, label: false, :as => :text, :input_html => { :rows => 7 , :style => 'width: 100%'}

    Funktioniert gre8 für mich.!

    Sollte angenommen werden, Antwort (Y)

    InformationsquelleAutor Ajey

Schreibe einen Kommentar