Designet til Compose har blitt oppdatert. Siden kan inneholde skjermbilder av det gamle designet, men informasjonen er oppdatert. Vi takker for din tålmodighet mens vi oppdaterer bildene!

Tagger er attributt-navn på CSS-klasser lagt til i den genererte HTML-koden til tjenesten. Forklart på en mindre teknisk måte kan CSS-tagger brukes til å stile skjemaelementer. I Hjelp/stil-fanen i panelet med elementets egenskaper, kan tagger legges til. Disse taggene kan dermed refereres til i CSS-filen til tjeneste-designet (skinet). Tagger kan brukes til å endre farger, fonter, innrykk, legge til ikoner, endre posisjoner m.m. per element. For mer informasjon om hvordan du tilpasser tjeneste-design med skins, sjekk ut Tjeneste-design (skins).

Tagger legges til i HTML-koden med prefikset tag-. F.eks. taggen roedBakgrunn vil legges til et element som tag-roedBakgrunn. I skin.css-filen kunne designtilpasningen for .tag-redBackground{}, f.eks. vært:

.tag-redBackground {
	/*Add your specifications here*/
	background-color: red;
}

Viktig: Du kan legge til flere tagger ved å skille dem med komma (f.eks. designTag1,designTag2 etc.). Etter at tagger er lagt inn i skjemabyggeren og spesifisert i tjeneste-skinet, kan du åpne DevTools i nettleseren (Ctrl/cmd + Shift + I for Chrome) i en forhåndsvisning av tjenesten. Da vil du se hvordan taggen er plassert og CSS-koden assosiert med taggen.

Tagger for Bootstrap

For øyeblikket er det ingen etablerte tagger i standard-skinet med bootstrap, men her er flere tagger som du enkelt kan klippe og lime inn i din skin.css-fil.

Flere spørsmål/elementer på samme rad

Dersom du ønsker flere elementer på samme rad brukes horisontale grupper. Ved å ikke vise gruppens ramme og tittel kamufleres gruppen bedre inn i skjemaet.

Likevel, som vi ser av forhåndsvisningen, har alle grupper automatisk innrykk (ekstra “padding”) siden det tar seg bedre ut når gruppens ramme vises. Gruppen er dermed ikke på samme linje som de andre elementene.

Vi kan fjerne dette innrykket med en tagg på gruppe-elementet.

Legg til følgende CSS-kode i skin.css-filen i skin-et ditt:

.tag-unindent,
.tag-unindent > div > div.row.question-group-content{
	padding: 0;
}

Hvis du forhåndsviser skjemaet med taggen i et skin med CSS-koden over, bør siden se slik ut (med mindre andre globale attributer er satt som påvirker innrykket):

Det ekstra rommet rundt Fornavn og Etternavn er borte og alle spørsmål starter på samme linje.

Formater heltall/desimal-input med enheter

Når du viser tall med enheter skal tallet tradisjonelt være høyre-justert. Ved å legge til en tagg og et høyre-posisjonert hint med enheten, kan litt CSS-kode og en tagg formatere elementet slik vi vil ha det.

Slik vises det stilede elementet i tjenesten:

CSS-koden (som tar høyde for alle typer input-spørsmål):

/*** --------------------------- Price tag --------------------------- ***/
/* Makes right-positioned hints appear on the right of input fields with overridden width */
small.hint_RIGHT{
	display: inline-block;
	opacity: 1;
	font-size: 100%;
}

/* Combine with right-aligned input text for nicely formatted monetary amounts */

.tag-price > div > input[type=text].form-control,
.tag-price > div > textarea.form-control,
.tag-price > div > div > input[type=text].bootstrap-datepicker,
.tag-price > div > input[type=password].form-control{
	text-align: right;
}

/* ------------------------------------------------------------------------- */

Viktig: Taggen fungerer kun for input-felter med egendefinert bredde!

Toggle-knapp

Hvis du ønsker å endre designet til avkrysningsbokser og radioknapper kan du blant annet gjøre dem om til toggle-knapper. I dette eksempelet har vi lagt taggen toggle på et avkrysningselement.

CSS-koden for denne taggen er temmelig omfattende, men stiling som inneholder animasjon er som regel mer kompleks:

/*** ------------------------------ Toggle tag ------------------------------ ***/
/* Override check box / radio button as a toggle button.*/

.tag-toggle > div > div > label.form-check-label {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 25px;
  background-color: #E9ECEF;
  border-radius: 25px;
}

.tag-toggle > div > div > label.form-check-label::after {
  content: ''; 
  position: absolute;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background-color: white;
  top: 1px;
  left: 1px;
  transition: all 0.3s;
}

.tag-toggle > div > div > input.form-check-input {
  display: none;
}

.form-check-input:checked + .form-check-label::after {
  left: 25px;
}

.tag-toggle > div > div > input.form-check-input:checked + .form-check-label {
  background-color: #2B7BB9;
}

/* -------------------------------------------------------------------------- */

I slutt-tjenesten vil avkrysningsboksen erstattes av en toggle-knapp:

Tagger for responsiv HTML

Dersom du jobber med et tjeneste-design i responsiv eller standard HTML, så er det en eldre dokumentasjon i den engelske dokumentasjonen som gir deg innsikt i hvilke ikoner som kan brukes fra standard-skinene – Style - form element CSS tags. Viktig: Da de fleste tjenester produseres med bootstrap i nyere tid, har vedlikehold av de eldre rammeverkene blitt nedprioritert, og noe av dokumentasjonen kan være utdatert.

Stil – CSS-tagger

Tagger for Bootstrap

Flere spørsmål/elementer på samme rad

Formater heltall/desimal-input med enheter

Toggle-knapp

Tagger for responsiv HTML