Задание CSS класса для полей. Использование вашего собственного CSS файла.

Для любого поля вы можете установить название CSS класса.

Также вы можете использовать встроенные классы, например hidden, two-column, three-column и four-column.


Например, чтобы выровнять несколько полей горизонтально, можно задать название системного класса two-column.

Такое имя класса нужно задать всем полям формы, которые вы хотите разместить на одной строке. Ниже показано, как это сделать:

Установка CSS класса полей веб-формы





Доступные стандартные классы:

.hide {

display:none;

}

 

.hidden {

display:none;

}

 

.two-column {

    clear: none;

    float: left;

    width: 47% !important;

}

 

.three-column {

    clear: none;

    float: left;

    width: 33% !important;

}

 

.four-column {

    clear: none;

    float: left;

    width: 20% !important;

}

 

 

 Вы можете дать название любому полю и загрузить определение внешнего вида полей в своем CSS файле.

Например, можно изменить определения встроенных классов следующим образом:

.two-column {
clear: none;
float: left;
width: 17% !important;
}

.three-column {
clear: none;
float: left;
width: 13% !important;
}

.four-column {
clear: none;
float: left;
width: 10% !important;
}

Ниже показано, как загрузить свой CSS файл:
 

Загрузка своего CSS файла


Как видно на примере, поля находятся ближе к друг другу и все благодаря загруженному вами CSS файлу.
Внешний вид  виджета таблицы также можно улучшить загрузив ваш собственный CSS файл. Допустим у нас есть CSS файл:
table {
border-width: medium;
border-spacing: ;
border-style: dotted;
border-color: black;
border-collapse: separate;
background-color: rgb(255, 250, 250);
}

table th {
border-width: 4px;
padding: 2px;
border-style: solid;
border-color: blue;
background-color: rgb(255, 245, 238);
-moz-border-radius: ;
}

table td {
border-width: 4px;
padding: 2px;
border-style: solid;
border-color: blue;
background-color: rgb(255, 245, 238);
-moz-border-radius: ;
}

Его можно загрузить точно так же как и в предыдущем примере мы загружали CSS файл для формы, только на вкладке Таблица.

В итоге наша таблица будет выглядеть следующим образом:

Таблица после загрузки своего CSS файла

С настройкой дизайна таблицы все намного интересней. Так как можно настроить не только внешний вид самой таблицы, но и всех форм на виджете БД,

т.е. формы для фильтрации записей, формы для группировки и, конечно же, формы поиска.

 

Также название CSS полей можно использовать в вашем собственном JavaScript коде, который вы можете загрузить на форму, чтобы добавить свою функциональность.

Примеры такого использования можно найти на форуме: для рандомизации поля и для смены названия поля.

 

Online конструктор форм
Создать Online Базу Данных

Поддержка пользователей
Контакты
О системе
Команда

QuintaDB.com
QuintaDB.ru
QuintaDB.com.ua
Условия использования
Конфиденциальность

Весь текст & дизайн защищён © - 2018 QuintaDB. Все права защищены.

Хорошего настроения вам на весь оставшийся день!