Отправка сообщения






Добро пожаловать!

Список чекбоксов с прокруткой

Найти правильное решение иногда бывает весьма не всегда просто, и когда решение все-таки приходит после долгих поисков, возникают мысли о том, что задача, которая казалась не простой, на самом деле проще некуда. В некоторых формах на сайте иногда нужно сделать список из чекбоксов. Но как вы знаете в стандартном html нет такого элемента формы, которые представлял из себя список из чекбоксов, с возможностью прокрутки. Оказалось, что можно обойтись и без него в принципе.
Пример весьма прост для понимания, поэтому сразу смотрим код:

<div style="width:200px; height:100px; overflow:auto; border:solid 1px #C3E4FE;">
<input type="checkbox" />Toyota
<input type="checkbox" />Mercedes-Benz
<input type="checkbox" />Volkswagen
<input type="checkbox" />Mitsubishi
<input type="checkbox" />Audi
<input type="checkbox" />Nissan
<input type="checkbox" />BMW
<input type="checkbox" />Lexus
</div>

Группа чекбоксов заключены между в тег div. Для этого тега в CSS задается фиксированный размер, кроме того задается параметр overflow:auto, который собственно и включает полосу прокрутки в случае если установленных размеров блока не достаточно для показа содержимого, в нашем случае это чекбоксы. Таким образом, визуально это выглядит как список чекбоксов с прокруткой, что и требовалось получить.

Результат:

Toyota
Mercedes-Benz
Volkswagen
Mitsubishi
Audi
Nissan
BMW
Lexus

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

Добавил: htmaker, 25.09.2014 г.
 
плохослабосойдетхорошоотлично (2 голосов, средний: 5,00 из 5)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Комментарии

  • Загрузка...

Наверх