Comment puis-je changer les colonnes de textarea dans twitter-bootstrap?

Question

Si je change la valeur de: rows, cela fonctionne. Mais il reste aux valeurs par défaut de cols quelle que soit la valeur définie avec ': cols =>'. La largeur de la colonne ne changera pas.

J'ai regardé la source HTML et cela reflétait le changement. Je me demande si le CSS de bootstrap pourrait être le suspect ...

HTML (il y a un "cols =" dans le HTML final, mais la largeur de colonne reste à la valeur par défaut, qui est 30. Je ne peux pas en croire mes yeux!)

 <textarea cols="100" id="comment_body" name="comment[body]" rows="5"></textarea>
 

Des rails:

 <%= form_for([@post, @post.comments.build]) do |f| %>
  <div class="field">
    <i class="icon-user"></i>
    <%= f.text_field :commenter %>
  </div>
  <div class="field">
    <i class="icon-comment"></i>
    <%= f.text_area :body, :rows => 5, :cols => 100 %>
  </div>
  <div class="actions">
    <%= f.submit %>
  <div> 
<% end %>
 

Answer 1

Les autres réponses n'ont pas fonctionné pour moi. Cela a:

     <div class="span6">
      <h2>Document</h2>
        </p>
        <textarea class="field span12" id="textarea" rows="6" placeholder="Enter a short synopsis"></textarea>
        <button class="btn">Upload</button>
    </div>
 

Notez le span12 dans un div avec span6 .

Answer 2

Mise à JOUR: Comme Bootstrap 3.0, l' input-* des catégories décrites ci-dessous pour le réglage de la largeur de l'entrée des éléments ont été supprimés. Au lieu d'utiliser l' col-* classes pour définir la largeur des éléments d'entrée. Des exemples sont fournis dans la documentation.

---

Dans le Bootstrap 2.3, vous pouvez utiliser l'entrée des classes pour le réglage de la largeur.

<textarea class="input-mini"></textarea>
<textarea class="input-small"></textarea>
<textarea class="input-medium"></textarea>
<textarea class="input-large"></textarea>
<textarea class="input-xlarge"></textarea>
<textarea class="input-xxlarge"></textarea>​
<textarea class="input-block-level"></textarea>​

Faites une recherche pour "Contrôle de dimensionnement" pour des exemples dans la documentation.

Mais pour la hauteur je pense que vous seriez toujours utiliser l'attribut rows.

Answer 3

Ajoutez simplement la classe bootstrap "row-fluid" à la zone de texte. Il va s'étirer à 100% de largeur;

Mise à jour: pour bootstrap 3.x, utilisez la classe "col-xs-12" pour textarea;

Mise à jour II: De même, si vous souhaitez étendre le conteneur à l’ensemble de la largeur, utilisez la classe: container-fluid.

Answer 4

J'ai trouvé ce qui suit dans le site.css généré par VS2013

 /* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}
 

Answer 5

Je ne sais pas si c'est la bonne façon mais j'ai fait ceci:

 <div class="control-group">
  <label class="control-label" for="id1">Label:</label>
  <div class="controls">
    <textarea id="id1" class="textareawidth" rows="10" name="anyname">value</textarea>
  </div>
</div>
 

et mettez ceci dans mon fichier bootstrapcustom.css:

 @media (min-width: 768px) {
    .textareawidth {
        width:500px;
    }
}
@media (max-width: 767px) {
    .textareawidth {

    }
}
 

De cette façon, il redimensionne en fonction de la fenêtre. On dirait que tout se passe bien sur un grand navigateur et sur un petit appareil mobile.