VPF::Как расположить чекбоксы в два столбца

Матильда

Дата 24.7.2013, 15:57 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 62
Регистрация: 24.10.2008
Где: СПб

Репутация: нет
Всего: нет

Доброго времени суток.

Помогите, пожалуйста, разобраться с чекбоксами.
Задача: расположить чекбоксы в два столбца.
Расположить в два столбца кое-как удалось. Но получается слишком большое расстояние между чекбоксом и текстом, правый столбец располагается ниже левого.
Делала так:

Код


...
<%
    boolean elementLeft = true;
%>
<logic:iterate id="row" name="UserForm" property="roles" indexId="index">
    <bean:define id="roleId" name="row" property="id"/>

    <%
        if (elementLeft) {
            elementLeft = false;
    %>
    <span class="cell-left"><input id="<%= roleId %>" name="row" type="checkbox" value="<%= roleId %>"/><label for="<%= roleId %>"><html:text name="row" property="name"/></label></span>
    <%
    } else {
        elementLeft = true;
    %>
    <span class="cell-right"><input id="<%= roleId %>" name="row" type="checkbox" value="<%= roleId %>"/><label for="<%= roleId %>"><html:text name="row" property="name"/></label></span>
    <br><br>
    <%
        }
    %>
</logic:iterate>
...

Код


.cell-left {
    display: inline-block;
    vertical-align: bottom;
    position: relative;
    padding: 5px 0 15px 0;
    background: #fff;
    margin-left: 5%;
    width: 40%;
    white-space: nowrap;
}
.cell-right {
    display: inline-block;
    vertical-align: bottom;
    position: relative;
    padding: 5px 0 15px 0;
    background: #fff;
    margin-left: 55%;
    width: 40%;
    white-space: nowrap;
}

.cell-left input {
    float: left;
    position: absolute;
}
.cell-left label {
    float: right;
    font-size: .9em;
}
.cell-right input {
    float: left;
    position: absolute;
}
.cell-right label {
    float: right;
    font-size: .9em;
}

AVA12

Дата 24.7.2013, 22:25 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 135
Регистрация: 4.5.2008

Репутация: 1
Всего: 4

Цитата

<%
boolean elementLeft = true;
%>
<logic:iterate id="row" name="UserForm" property="roles" indexId="index">
<bean:define id="roleId" name="row" property="id"/>

Штоэта??? Что-то не припомню таких конструкций в HTML.

Матильда

Дата 24.7.2013, 22:33 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 62
Регистрация: 24.10.2008
Где: СПб

Репутация: нет
Всего: нет

Цитата(AVA12 @ 24.7.2013, 22:25)

Цитата

<%
boolean elementLeft = true;
%>
<logic:iterate id="row" name="UserForm" property="roles" indexId="index">
<bean:define id="roleId" name="row" property="id"/>

Штоэта??? Что-то не припомню таких конструкций в HTML.

Это Struts.
Я не знаю заранее сколько у меня будет элементов. Элементы вытаскиваются из базы, помещаются в коллекцию. дальше нужно в цикле отобразить все элементы.

ksnk

Дата 25.7.2013, 07:31 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

А не нужно плавающими элементами увлекаться. Если про IE6 не вспоминать - можно пользоваться забавной фенечкой text-align:justify.

Код


<div class="checkbox_container row2">
     <label class="checkbox"><input type="checkbox" name="..."> some text</label>
     <label class="checkbox"><input type="checkbox" name="..."> some text</label>
...
      <span class="last_element"></span>
</div>

Код


.checkbox_container {
   text-align:justify;
}
label.checkbox {
    display:inline-block;
    min-width:100px;
}
.row2 label.checkbox {
    width:40%;
}
.row3 label.checkbox {
    width:25%;
}
.row4 label.checkbox {
    width:20%;
}
span.last_element{
    display:inline-block;
    width:80%;
    height:1px;
    line-height:px;
    overflow:none;
}
label.checkbox input {
}

Расположение чекбокса относительно собственного текста можно задавать правилом label.checkbox input

элемент last_element нужен для выравнивания последней строки.

Если указать правильный min-width у правила label.checkbox, то можно увидеть как оно себя ведет при изменении размеров экрана.

http://jsfiddle.net/n8QAj/

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Матильда

Дата 25.7.2013, 15:53 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 62
Регистрация: 24.10.2008
Где: СПб

Репутация: нет
Всего: нет

ksnk, спасибо! разобралась

MasterIt

Дата 17.12.2013, 08:57 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 3
Регистрация: 17.12.2013
Где: Орел

Репутация: нет
Всего: нет

Буквально на днях возник вопрос с выводом чекбоксов умного фильтра в два столбца на Битрикс, долго работал с API, в итоге решил вопрос простой CSS версткой:

Код



#col li {
    display: block;
    float: left;
    width: 45%;
}
#col {
     margin: 0;
     padding: 0;
     list-style-type: none;
}

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »