web-dev-qa-db-fra.com

augmenter la taille de la zone de texte bootstrap (ASP.NET MVC)

Existe-t-il un moyen d'augmenter la taille (longueur) des zones de texte sous forme horizontale?

<div class="form-horizontal">
    <div class="form-group">
        @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
                @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Name)
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
</div>

J'ai essayé de changer les classes col-md-* mais cela n'a pas fonctionné.

c#htmlasp.netasp.net-mvctwitter-bootstrap
12
den

Une autre façon de procéder consiste simplement à changer la classe col-md-x sur la div qui englobe votre zone de texte et votre message de validation à la largeur souhaitée. 

Par exemple, changez ceci:

<div class="col-md-10">
     @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
     @Html.ValidationMessageFor(model => model.Name)
</div>

pour ça:

<div class="col-md-5">
     @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
     @Html.ValidationMessageFor(model => model.Name)
</div>

Et maintenant, votre champ de texte aura la largeur de 5 colonnes au lieu de 10. Cela ne nécessite aucune classe supplémentaire et un bonus supplémentaire est que si vous avez un message de validation plus long, il sera placé dans le même espace que votre champ de texte.

5
ryanulit

Toutes les réponses ont été utiles.

Ma solution consistait à modifier la largeur maximale par défaut dans mon fichier CSS car elle limitait la taille

input, select, textarea {
    max-width: 500px;
}

Ensuite, changer la classe col-md- * a bien fonctionné.

merci

10
den

votre balise a généralement un champ de largeur maximale. Si vous le changez en

text {
    max-width: 100%;
    width: 100%;
}

alors vous pouvez atteindre toute la largeur disponible. Si vous effectuez cette opération pour plusieurs résolutions de périphériques, il est préférable d’utiliser une largeur en pourcentage plutôt qu’une largeur fixe en px. J'espère que cela vous aide.

3
Anish Kumar

J'ajouterais une classe à votre zone de texte:

 @Html.TextBoxFor(model => model.Name, new { @class = "form-control long-textbox" })

Puis style dans votre CSS:

.long-textbox{
    width:300px;
}

Vous pouvez utiliser l'attribut size, mais j'estime qu'il s'agit davantage d'une question de style et qu'il convient de le gérer en CSS.

3
Mister Epic

Utilisez la propriété HTML INPUT "Size".

Exemple:

@Html.TextBoxFor(model => model.Name, new { @class = "form-control", size="15" })
@Html.TextBoxFor(model => model.Other, new { @class = "form-control", size="25" })
1
Rafael A. M. S.

Dans Bootstrap 3, la classe form-control définit les éléments input sur 100% du conteneur.

Sinon, vous pouvez appliquer manuellement votre propre style:

@Html.TextBoxFor(model => model.Name, new { @class = "wide-control" })

Avec CSS comme ça:

input.wide-control {
    width: 300px;
}
1
DavidG

Comme quelqu'un l'a mentionné, mettez la taille sur l'entrée de la zone de texte elle-même. Pas besoin de créer une nouvelle classe pour gérer la largeur.

<div class="col-md-10">
...
   @Html.TextBoxFor(model => model.Name, new { @class = "form-control col-md-10" })
...
</div>
0
paulyb

Vous pouvez utiliser une zone de texte et utiliser l'attribut style avec le mot clé new , comme dans l'exemple ci-dessous

@Html.TextBoxFor(model => model.Detail, new { style = "width:600px" })

Il peut également être utilisé pour LabelFor

@Html.LabelFor(model => model.Detail, "Detail", new { @class = "control-label col-md-4", style = "width:160px" })
0
Scanner

J'essaie toujours de ne pas changer la taille, je laisse les choses remplir l'espace et utilise le système de grille.

Cela l'aide à fonctionner sur toutes les tailles d'écran.

Merci

http://plnkr.co/edit/2ZczWMsNk9arscbY26j8?p=preview

<div class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-md-2">Wide</label>
    <div class="col-md-10">
      <input class="**form-control**"  type="TextBox"/>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-md-2">Not as Wide</label>
    <div class="col-md-8">
      <input class="form-control"  type="TextBox"/>
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-md-2">Narrow</label>
    <div class="col-md-6">
      <input class="form-control"  type="TextBox"/>
    </div>
  </div>

  <div class="form-group">
    <div class="col-md-offset-2 col-md-10">
      <input type="submit" value="Create" class="btn btn-default" />
    </div>
  </div>
</div>
0
Steve Drake