Stylování

Modul Forms umožňuje přidávat vlastní CSS styly do formuláře pomocí vlastnosti CustomStyle v JSON konfiguraci formuláře.

CustomStyle

Vlastnost CustomStyle v konfiguraci formuláře obsahuje CSS kód, který se při načtení formuláře vloží jako <style> element do stránky.

{
  "CustomStyle": ".my-form-class { max-width: 1200px; }",
  "Groups": [
    {
      "Name": "Základní údaje",
      "Fields": [
        { "InternalName": "Title" },
        { "InternalName": "Status" }
      ]
    }
  ]
}

Poznámka: Správné CSS selektory pro jednotlivé elementy formuláře zjistíte pomocí vývojářských nástrojů prohlížeče (F12).

Příklady

Příklad: Zvýraznění povinných polí

/* Červený rámeček pro povinná pole */
.ti-field-required .ti-field-input {
  border-left: 3px solid #d13438;
}

Příklad: Úprava šířky formuláře

/* Širší formulář pro seznamy s mnoha poli */
.ti-form-container {
  max-width: 1200px;
}

Příklad: Skrytí konkrétního pole pomocí CSS

/* Skrytí pole s interním názvem InternalNotes */
.ti-field-InternalNotes {
  display: none;
}

Poznámka: Pro dynamické skrývání polí je vhodnější použít Field API (field.hidden = true), které správně pracuje s hodnotami polí. CSS skrytí pouze vizuálně odstraní pole z formuláře.