Войти

Войти



Вы еще не зарегистрированы?


Восстановить пароль Активация

Задание CSS класса для полей. Использование вашего собственного 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 коде, который вы можете загрузить на форму, чтобы добавить свою функциональность.

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

 


Пожалуйста, войдите в QuintaDB чтобы иметь возможность оставлять комментарии
Поделиться обсуждением в социальных сетях: