基金會，簡單的形式，文本區域，列

我有一個Zurb基金會簡單的形式與一個字段（：描述）是一個文本區域。我想要文本區域爲10行深，但它顯示爲2行。任何人都知道如何改變這一點？基金會，簡單的形式，文本區域，列

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

來源

2013-07-04 mikeglaz

由於您使用的引導，引導的默認屬性適用於您輸入文本區域。它會導致問題。我有同樣的問題，但與列。

您可以通過兩種解決方案克服了這個問題：

1）創建一個類，並指定高度和寬度設置爲自動。根據需要使用課程。

在你的application.css或任何css文件中創建這個類。

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

現在在你的ruby代碼中使用這個類。

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

既然你已經明確指定的寬度和高度是自動，自舉的textarea的寬度，高度將由本地類「測試」寬度和高度overrided。因此：cols => 5，：rows => 10個屬性將被設置。

2.）修改引導CSS文件中的輸入textarea屬性。如果要在任何地方使用相同的寬度和高度，請將輸入textarea的高度或寬度更改爲自動以避免混淆，或將其設置爲標準像素。

來源

2013-07-05 05:56:13

實際上，這會導致我的文本區域爲其容器寬度的一半。 – mikeglaz

默認情況下，修改引導CSS（將寬度和高度設置爲自動）將使所有textarea爲容器寬度的一半。因爲它明確忽略了默認引導程序的CSS定義。嘗試第一個解決方案。因此，您將始終使用默認的引導程序屬性，對於某些情況，您可以通過明確指定類來覆蓋它，如解決方案1中所示。 –

我正在使用步驟＃1。我不把一個：cols屬性和我的：描述是我的容器的一半寬度。 – mikeglaz

類別指定不起作用，試試這個，而不是

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

工程gre8我！

來源

2013-10-08 17:36:30 Ajey

應該接受答案（Y） –

基金會，簡單的形式，文本區域，列

回答

相關問題