web-dev-qa-db-fra.com

Les entrées des cases à cocher sont mal alignées lorsqu'il n'y a pas d'étiquette d'accompagnement utilisant Bootstrap et MVC5

Bootply pour jouer avec

Visual Studio 2013 génère le CSHTML suivant lors de l'échafaudage d'une vue d'édition pour un modèle avec un booléen:

<div class="form-group">
    @Html.LabelFor(model => model.IsUrgent, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        <div class="checkbox">
            @Html.EditorFor(model => model.IsUrgent)
         </div>
    </div>
</div>

Après avoir traversé Razor, vous obtenez ceci:

<div class="form-group">
  <label class="control-label col-md-2" for="IsUrgent">Is bad :(</label>
   <div class="col-md-10">
    <div class="checkbox">
      <input class="check-box" data-val="true" id="IsUrgent" name="IsUrgent" type="checkbox" value="true">
      <input name="IsUrgent" type="hidden" value="false">
    </div>
  </div>
</div>

Twitter Bootstrap 3.2 n'aime cependant pas cette façon d'utiliser les étiquettes car c'est le résultat:

Screenshot

Notez que la case à cocher est positionnée trop à gauche.

Si j'encapsule mon entrée dans une étiquette factice avec un espace, par exemple.

<div class="form-group">
    <label class="control-label col-md-2" for="IsUrgent">Is good!</label>

    <div class="col-md-10">
      <div class="checkbox">
        <label><input class="check-box" data-val="true" id="IsUrgent" name="IsUrgent" type="checkbox" value="true">
        <input name="IsUrgent" type="hidden" value="false">&nbsp;</label>
      </div>
    </div>
</div>

J'ai compris:

Second screenshot

qui a l'air sympa mais ce n'est pas du HTML valide:

L'élément label peut contenir au plus une entrée, un bouton, une sélection, une zone de texte ou un descendant de keygen.

Suis-je en train de faire quelque chose de mal avec mes classes CSS?

Modifier

Si je déplace le deuxième input en dehors du label comme le suggère @Saranga, je reste avec le label redondant qui ne sert à rien de sémantique ...

cssasp.net-mvctwitter-bootstraptwitter-bootstrap-3
19
janv8000

J'ai implémenté un Html Helper CheckBoxForBootstrap qui place la case à cocher dans une étiquette mais sans aucun texte d'étiquette donc il n'y a pas d'étiquette redondante mais vous obtenez toujours la mise en forme souhaitée. Le champ masqué requis par le classeur de modèle mvc est ajouté après que l'étiquette doit être en html valide.

public static MvcHtmlString CheckBoxForBootstrap(this HtmlHelper htmlHelper, 
        string name, 
        bool isChecked)
{

    TagBuilder checkbox = new TagBuilder("input");
    checkbox.Attributes.Add("type", "checkbox");
    checkbox.Attributes.Add("name", name);
    checkbox.Attributes.Add("id", name);
    checkbox.Attributes.Add("data-val", "true");
    checkbox.Attributes.Add("value", "true");
    if (isChecked)
        checkbox.Attributes.Add("checked", "checked");

    TagBuilder label = new TagBuilder("label");
    //nest the checkbox inside the label
    label.InnerHtml = checkbox.ToString(TagRenderMode.Normal);

    TagBuilder hidden = new TagBuilder("input");
    hidden.Attributes.Add("type", "hidden");
    hidden.Attributes.Add("name", name);
    hidden.Attributes.Add("value", "false");

    return MvcHtmlString.Create(
    label.ToString(TagRenderMode.Normal) 
    + hidden.ToString(TagRenderMode.Normal)
    );
}
3
Joe Audette
<div class="checkbox">
    <label>
        @Html.CheckBoxFor(model => model.IsUrgent)
        @Html.DisplayNameFor(model => model.IsUrgent)
    </label>
</div>
32
David Morissette

Au lieu de @Html.EditorFor(model => model.IsUrgent) ajoutez le code suivant. Vous pouvez placer le champ masqué en dehors de la balise label.

<div class="checkbox">
    <label>
        <input class="check-box" data-val="true" id="IsUrgent" name="IsUrgent" value="true" type="checkbox"> &nbsp;
    </label>
    <input name="IsUrgent" type="hidden" value="false">
</div>

[~ # ~] démo [~ # ~]

Merci!

5
Saranga
<div class="checkbox" style="margin: 5px 0 0 0;">
    <label for="remember" style="margin: 0;">
        <input name="remember" id="remember" type="checkbox" style="margin-top: 2px;">
        Remember me
    </label>
</div>

DÉMO

1
Everton Z. P.

Avertissement: Solution avec CSS

Je l'ai résolu de cette façon:

<div class="form-group">
    @Html.LabelFor(m => m.IsRequired2, new { @class = "control-label col-md-2" })
    <div class="col-md-2 checkbox-form">
        @Html.CheckBoxFor(m => m.IsRequired2)
    </div>
</div>

En utilisant cette classe CSS:

.checkbox-form {
    padding-top: 5px;
}

Ce qui génère ceci:

<div class="form-group">
    <label for="IsRequired2" class="control-label col-md-2">Good!</label>

    <div class="col-md-2 checkbox-form">
      <input value="true" name="IsRequired2" id="IsRequired2" type="checkbox">
      <input value="false" name="IsRequired2" type="hidden">
    </div>
</div>

Comme on peut le voir ici , il a l'avantage de ne pas ajouter d'espace vertical supplémentaire avant ou après la ligne de case à cocher.

1
DavidC

J'ai eu le même problème et j'ai juste changé la classe sur le div entourant immédiatement la case à cocher. Essayer:

    <div class="form-control-static">
        @Html.EditorFor(model => model.IsUrgent)
     </div>
1
Pasilda

vous pouvez essayer du code que j'ai partagé sur mon compte github: icheck-bootstrap

Vous pouvez voir la démo ici:

<link href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/bantikyan/icheck-bootstrap/9bd0c21a/icheck-bootstrap.min.css" />


<div class="checkbox icheck-primary">
    <input type="checkbox" id="someCheckboxId1" />
    <label for="someCheckboxId1">Clieck to check</label>
</div>

<div class="checkbox icheck-wisteria">
    <input type="checkbox" id="someCheckboxId2" />
    <label for="someCheckboxId2">Clieck to check</label>
</div>
0
Hovhannes Bantikyan

il suffit de supprimer le div avec la classe "checkbox" entourant votre case à cocher et votre étiquette et le problème disparaîtra

0
mamashare