Позиционирање поља на обрасцу је једно од најчешће постављених питања. Постоји разни начини на које можеш подесити позицију поља на обрасцу:
Сако поље са твог обрасца, без обзира колико се разликује од осталих, може бити прилагођено коришћењем дизајнера орбасца. Поља можеш померити како год пожелиш и образац ће и даље да функционише.
Превуци и пусти поља обрасца
Ово је најједноставнији начин да додаш нова поља и да их послажеш. Све што је потребно је да кликнеш на једно од поља и, док држиш тастер миша, превучеш поље на нову локацију.
Follow the same easy steps to grab the field from the left Tools menu to move the field around your form. Click > hold > drag and drop. Пратећи исти корак можеш додати нова поља са панела на левој страни. Кликни – држи – превуци – пусти.
Коришћење моћи скупљања
Поља је потребно скупити када желиш да ставиш неколико поља у исти ред. Поље можеш једноставно смањити ако кликнеш десни тастер миша на поље:
Такође је могуће смањити поље из подешавања поља у картици Напредно.
Смањивање поља ће смањити ширину на минималну вредност. Када смањиш више поља једно поред другог, појавиће се у једном реду.
Велико проширивање
Проширивање поља ће га вратити оригиналну, максималну ширину поља. Једноставно прати исте кораке као и за смањивање.
Премести поља у нов ред
Уколико смањиш 10 узастопних поља, сва ће бити приказана у што мање редова је могуће. По некада је ово шта желиш, али ћеш чешће пожелети да прикажеш два поља у једном реду.
У том случају, можеш подесити свако треће поље да се појави у новом реду. Опцију за ово ћеш наћи на истом месту као и у претходним случајевима. У картици напредно у подешавањима поља.
Спајање редова
Рецимо да си се предомислио, и да ипак не желиш да пребациш питање у нов ред. У овом случају, једноставно подеси Помери у нов ред на Не.
То ће уклонити нов ред, и спојиће поље са редом изнад уколико за то има места.
Управљање са више поља од једном
Уколико желиш додатно да олакшаш рад приликом креирања образаца, ова опција је за тебе.
Опције за креирање дупликата, уклањање и подешавање поља као обавезно можеш применити на више поља од једном.
Како то функционише? Кликни овде да сазнаш.
Позиционирање поља користећи дизајнер обрасца
Дизајнер образаца је супер због много разлога:
- Дозвољава дизајнерима и програмерима да једноставно креирају дизајн који желе.
- Онима који не знају како да програмирају такође омогућава креирање супер орбазаца.
Свако може да користи дизајнер образаца и да добију жељени дизајн у неколико једноставних кликова.
Да почнеш да користиш дизајнер образаца, отвори свој образац у креатору и кликни на Дизајнер орбазаца у горњем десном ћошку.
Након тога, на дну панела отвори Напредни дизанјер.
Први сет опција за подешавање позиција је поу Line layout менију
- Размак између редова – Повећај или смањи размак између два реда. Коришћење ове опције може бити корисно будући да такође одржава размак између грешака. Грешке се прикажу када корисник унесе погрешне инфромације у поље и грешка се покаже. Ова вредност утиче на сва поља обрасца.
- Вертикално удубљење (padding) – Подеси празан простор изнад и испод поља.
- Хоризонтално удубљење (padding) – Подешљва празан простор са леве и десне стране поља.
Сва ова подешавања утичу на сва поља у обрасцу.
Напредно позиционирање користећи CSS
Напредни начин за промену позиције поља унутар дизајнера је коришћењем CSS-а. Ово је у главном за напредне кориснике, али, са нашим дизајнером је довољно једноставно како би свако покушао.
Уколико кликнеш на поље обрасца из дизајнера обрасца, сва поља истог типа ће бити означена.
Означена поља имају две секције у десном панелу:
- Приказују све све класе што олакшава промену CSS-а.
- Приказивање конкретног CSS својства које можеш да користиш.
Ево како да учиниш да поља за одабир у средини заузму две колоне од 50% у средини, а поља изнад и испод једнаку ширину од 25%.
Најбољи начин за ово је приметити да постоје само два поља чија ширина треба бити 50%, а више њих са пирином од 25%.
Знајући то, прво ћемо применити CSS на оне који су чешћи:
/* шири смањена поља у 4 једнаке колоне у једном реду */
.form-line.form-line-column {
width: 25%;
}Сад, да би изменили следећа два поља, потребно је кликнути на њих да би их одабрали. Ако кликнемо два пута, одабраћемо јединствени идентификатор поља, и CSS ће бити примењен само на то поље. Ако кликнемо једном, биће одабрана класа поља, и CSS ће бити примењен на сва поља са истом класом. Свако поље може да има само један јединствени идентификатор, а се име класе се може понављати.
Следећи CSS можемо додати на прво поље од два која желимо да заузму пола стране:
/* Подешава поље да заузме пола ширине целог обрасца */
#id_15 {
width: 50%;
}Након овога би требало да добијемо нешто овако:
Шта сад? Кликни на дугме за чување и врати се у креатор орбасца да наставиш са креирањем обрасца, или га подели ако си завршио.
Приручник за позиционирање
Креирање обрасца са две колоне
.form-line.form-line-column {
width: 50%;
}Креирање орбасца са 3 колоне
.form-line.form-line-column {
width: 33%;
}Подешавање обрасца са 4 колоне
.form-line.form-line-column {
width: 25%;
}Да ли си приметио шта је заједничко? Вредности које су нам потребне су подешене коришћењем следеће формуле:
{ширина обрасца} / {број колона које желимо}
Што је исто као и:
100% / 2 = 50% 100% / 3 = 33.33% 100% / 4 = 25%
Поравнање једног поља на десну страну екрана
.form-line.form-line-column.form-col-1 {
float: right;
}Подеси да текст обрасца буде читљив са десна на лево
.form-all * {
text-align: right;
direction: rtl !important;
unicode-bidi: bidi-override !important;
}
label.form-label-top, label.form-label-left, label.form-label-right {
font-weight: bold;
margin-bottom: 9px;
float: right;
text-align: right;
}Погледај резултат овде: https://form.jotform.com/213543607725052
Имаш ли коментар? Постави их испод, или нас контактирај уколико ти је потребна додатна помоћ.
Пошаљи коментар: