Входы чекбоксов плохо выровнены, когда нет сопровождающей метки с использованием Bootstrap и MVC5

18

Bootply для воспроизведения с

Visual Studio 2013 генерирует следующий CSHTML при создании леса для редактирования с моделью с булевым:

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

Пройдя через Razor, вы получите следующее:

<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 однако не любит этот способ использования меток, потому что это результат:

Изображение 8910

Обратите внимание, что флажок расположен слишком много влево.

Если я помещаю свой ввод в фиктивную метку с некоторым пробелом, т.е.

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

Я получаю это:

Изображение 8911

который выглядит неплохо, но недействителен HTML:

Элемент label может содержать не более одного входа, кнопки, select, textarea или потокового потомка.

Я делаю что-то не так с моими классами CSS?

Edit

Если я перемещаю второй input вне label, поскольку @Saranga предполагает, что я все еще остаюсь с избыточным label, который не использует семантическую функцию...

  • 1
    Есть ли проблема с включением правила в файл site.css: .checkbox> input [type = checkbox] {margin-left: 0; }?
Теги:
asp.net-mvc
twitter-bootstrap-3

9 ответов

3
Лучший ответ

Я реализовал Html Helper CheckBoxForBootstrap, который помещает флажок в ярлык, но без текста ярлыка, поэтому нет избыточной метки, но вы все равно получите нужное форматирование. Спрятанное поле, необходимое для связывания с mvc-моделью, добавляется после того, как ярлык должен быть действительным html.

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)
    );
}
Поделиться
30 
<div class="checkbox">
    <label>
        @Html.CheckBoxFor(model => model.IsUrgent)
        @Html.DisplayNameFor(model => model.IsUrgent)
    </label>
</div>
Поделиться
  • 0
    Это приведет к неверному HTML, т.е. Элемент label может содержать не более одного элемента input, button, select, textarea или keygen Потомок.
4

Вместо @Html.EditorFor(model => model.IsUrgent) добавить следующий код. Вы можете поместить скрытое поле вне тега 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>

DEMO

Спасибо!

Поделиться
  • 0
    лучшее имя пользователя stackoverflow @niceass
  • 0
    Да, прости. Я обновил ответ. Спасибо!
Показать ещё 2 комментария
1

Предупреждение: решение с CSS

Я решил это так:

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

Использование этого класса CSS:

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

Что генерирует это:

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

Как можно видеть здесь, у него есть преимущество не добавлять дополнительное вертикальное пространство до или после строки флажка.

Поделиться
1 
<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>

DEMO

Поделиться
  • 0
    Это решение ставит метку справа от флажка
1

У меня была такая же проблема, и я просто изменил класс на div, который сразу же включил этот флажок. Попробуйте:

    <div class="form-control-static">
        @Html.EditorFor(model => model.IsUrgent)
     </div>
Поделиться
  • 0
    При нажатии на ярлык метка перемещается в поле ввода, это решение не
0

просто удалите div с классом "checkbox", окружающим ваш флажок и ярлык, и проблема исчезнет.

Поделиться
0

вы можете попробовать код, который я поделил в моей учетной записи github: icheck-bootstrap

Здесь вы можете увидеть демо:

<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
    Ссылка на ссылку превышает 24 КБ
-1 
        <div class="form-group">
            <div class="checkbox">
                <div class="col-sm-2">
                    @Html.DisplayNameFor(m => m.IsUrgent)
                </div>
                <div class="col-sm-10">
                    <label>
                        @Html.CheckBoxFor(m => m.IsUrgent)
                    </label>
                </div>
            </div>
        </div>

и обратный порядок

            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <div class="checkbox">
                        <label>
                            @Html.CheckBoxFor(m => m.IsUrgent)
                            @Html.DisplayNameFor(m => m.IsUrgent)
                        </label>
                    </div>
                </div>
            </div>
Поделиться
  • 0
    Это приведет к неверному HTML, т.е. Элемент label может содержать не более одного элемента input, button, select, textarea или keygen Потомок.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню