Загрузчик-переключатель, как показать большой текст метки

Я использую плагин Twitter bootstrap-switch, чтобы показать флажок с двумя вариантами. Это хорошо работает для флажков с маленьким текстом метки, как "да / нет". Однако, когда речь идет о большом тексте метки, таком как "Нормальный / Ненормальный", часть текста не видна пользователю.

Я пытался использовать data_size атрибут:

@Html.CheckBoxFor(model => Model.keyitems[i].Status,
                  new { @checked = "checked",
                        @data_on_text = "Normal",
                        @data_off_text = "Abnormal",
                        @data_size = "switch-large" })

Но это не сработало.

Как сделать так, чтобы плагин поддерживал более длинный текст?

Источник

3 ответа

Решение

Прежде всего, атрибуты данных используют дефисы (-), не подчеркивает (_).
Также "switch-large" не является допустимым значением для size опция, которая принимает следующие значения:

null, 'mini', 'small', 'normal', 'large'

Что еще более важно, большой элемент управления на самом деле не делает так много, чтобы изменить допустимый размер. Вам придется переопределить ширину элемента управления следующим образом:

.bootstrap-switch-large{
    width: 200px;
}

Все значения ширины элемента управления основаны на процентах от родительского элемента, поэтому все остальное должно отображаться нормально.

<input type="checkbox" class="switch"
       data-on-text="normal"
       data-off-text="abnormal"
       data-size="large" />

Демо в jsFiddle

Скриншот

Источник

Принятый ответ отличный, я просто хочу добавить ссылку на плагин здесь. Я использовал это в подобных случаях. Это BootStrapSwitch. Он поддерживает обратные вызовы, которые являются настоящим преимуществом.

Источник

Что-то еще, что потенциально можно проверить, - это версия jQuery. Я унаследовал сайт, на котором работала более старая версия, а размеры моих кнопок были слишком малы, что обрезало текст. Как только я использовал текущую версию, все стало работать как надо.

Источник
Другие вопросы по тегам