# Lehetőségek oszlopokban és átállás a CSS Ready Classes osztályokról

> Hogyan jelenítsd meg a jelölőnégyzetek és rádiógombok lehetőségeit oszlopokban, és mivel válts ki az elavult Ready Classes osztályokat.

## Lehetőségek megjelenítése oszlopokban

A jelölőnégyzet, a rádiógomb és a Többválasztós mező lehetőségeit az űrlapszerkesztőben, külön CSS nélkül oszlopokba rendezheted. Korábban ehhez a CSS Ready Classes osztályok kellettek (például `gf_list_2col`), de ezek elavultak, és a legújabb főverzióban a régi jelölés támogatásával együtt megszűnnek.

### A beállítás helye

1. Vegyél fel egy **Jelölőnégyzetek**, **Többválasztós** vagy **Rádiógombok** mezőt, és kattints rá az űrlapszerkesztőben.
2. A **Mező beállításai** oldalsávban nyisd ki az **Általános** szakaszt.
3. A **Lehetőségek elrendezése** sorban válaszd az **Oszlopok** lehetőséget.
4. Állítsd be az oszlopok számát és a sorrendet.

![A Lehetőségek elrendezése beállítás az Oszlopok választással](./kepek/megjelenes-4-valasztas-oszlopok.webp)

*A Lehetőségek elrendezése beállítás az Oszlopok választással* (https://minta-bolt.hu/wp-admin/admin.php?page=gf_edit_forms&id=4)

A képen az **Oszlopok** választás után megjelenő két új beállítás látszik: az **Oszlopok száma** és az **Oszlopok szerinti elrendezés**.

### A beállítások

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Oszlopok száma** | Hány oszlopba rendeződjenek a lehetőségek (1 és 5 között: **1 oszlop** … **5 oszlop**). | 1 oszlop |
| **Oszlopok szerinti elrendezés** | A lehetőségek sorrendje több oszlopnál. **Vízszintesen**: balról jobbra tölti ki a sort, utána jön a következő sor. **Le**: fentről lefelé tölti ki az oszlopot, utána jön a következő oszlop. | |

A megjelenő oszlopok száma nem mindig egyezik a beállítottal. Az elosztást a böngésző CSS-e végzi, és igyekszik elkerülni az egyenlőtlenül megtöltött oszlopokat. Például négy oszlopnál 5 vagy 9 lehetőséggel csak három oszlop jelenhet meg. Ez a CSS ismert korlátja, nem a bővítmény hibája.

## Átállás a CSS Ready Classes osztályokról

Ha az űrlapjaid CSS Ready Classes osztályokat használnak, érdemes áttérned az űrlapszerkesztő elrendezés-szerkesztőjére vagy saját CSS-re, hogy a későbbi főverziókkal is működjenek. Az űrlapszerkesztő figyelmeztetést is mutat az elavult osztályokról.

A bővítmény főverziójának következő kiadása a régi jelölés (az eredeti, 2009-es szerkezet) támogatását teljesen megszünteti. A modern jelölés már a 2.5-ös kiadás óta elérhető, de sok űrlap még a régi jelölés elemeire, köztük a Ready Classes osztályokra támaszkodik az elrendezéshez.

A saját osztályt a mező **Megjelenés** szakaszának **Egyéni CSS-osztály** mezőjébe írod:

![A Megjelenés szakasz az Egyéni CSS-osztály mezővel](./kepek/megjelenes-4-valasztas-elrendezes.webp)

*A Megjelenés szakasz az Egyéni CSS-osztály mezővel* (https://minta-bolt.hu/wp-admin/admin.php?page=gf_edit_forms&id=4)

A képen az **Egyéni CSS-osztály** mezőt keresd: ide írt osztály kerül a mezőre, és erre célozhatsz a CSS-sel.

### Mi az a Ready Class, és hogyan működik

A Ready Classes az 1.5-ös kiadásban jelent meg: kész osztálynevek, amelyeket a mezőre teszel, és az űrlap alap stíluslapjának előre megírt szabályai alapján másképp rendezik el a mezőt. Mivel a régi jelölésben az osztály a mezőt körülvevő szülőelemre (`li`) kerül, saját osztályt is megadhatsz, és a téma stíluslapjában te írhatsz rá szabályt.

- Az osztályt az űrlapszerkesztőben a mező **Megjelenés** szakaszának **Egyéni CSS-osztály** mezőjébe írd, majd mentsd az űrlapot. Az osztály hatása nem látszik az űrlapszerkesztőben, csak az előnézetben vagy a kész oldalon.
- Több osztályt szóközzel elválasztva is megadhatsz egy mezőn. Nem minden kombináció működik, de sok igen: például egy kétoszlopos elrendezésen belül lehet kétoszlopos lista.
- Az oszlopos osztályok (felek, harmadok, negyedek) csak az „a címke felül” elrendezésű űrlapon működnek, és csak egymás melletti mezőkön: az első mezőre a bal oldali, a következőre a jobb oldali osztály kerül (harmadoknál bal, középső, jobb; negyedeknél első, második, harmadik, negyedik).
- A Ready Classes mobilon nem érvényesül, ott reszponzív stílus dolgozik.
- A téma saját stíluslapja felülírhatja az osztályok hatását, ilyenkor a téma stílusán kell igazítanod.
- A listaosztályok (`gf_list_*`) csak jelölőnégyzetes és rádiógombos listákon hatnak, bármilyen címkehelyzetnél. A `gf_list_2col` … `gf_list_5col` soronként tölti ki az oszlopokat balról jobbra, a `_vertical` változat fentről lefelé, úgy osztva szét a listát, hogy az oszlopok hossza közel azonos legyen. A `gf_list_height_*` osztályok egyforma magasságot adnak a lista elemeinek, hogy a különböző magasságú elemek ne csússzanak szét.
- A `gf_simple_horizontal` az űrlap beállításainál a **CSS-osztály neve** mezőbe kerül, és nagyon egyszerű, egybemezős vízszintes űrlapot ad (például e-mail-mező és mellette a gomb). A mező címkéje ilyenkor rejtett, ezért helyőrzőt érdemes használni, és a mező mérete legyen „nagy”. A `gf_confirmation_*` osztályok szintén ide kerülnek, és csak szöveges visszaigazolásnál működnek, oldal vagy átirányítás típusúnál nem.
- A `gf_alert_*` osztályok a HTML mező tartalmát színes sávvá alakítják, a `gf_scroll_text` a Szakasz mezőt rögzített magasságú, görgethető dobozzá (hosszú szabályzatokhoz), a `gf_hide_ampm` elrejti az Idő mező de./du. választóját (az űrlapon, a beküldésben nem), a `gf_hide_charleft` a Bekezdés mező karakterszámlálóját, a `gf_invisible` pedig elrejti a mezőt ott is, ahol nincs Láthatóság beállítás (például a termékmezőknél).

### Az elavult osztályok és a helyettük használható megoldás

| Osztály | Állapot | Mit használj helyette |
|---|---|---|
| `gf_left_half`, `gf_right_half` | a 2.5-ös kiadás óta elavult | az űrlapszerkesztő oszlopkezelése (a mezők húzással egymás mellé rendezése) |
| `gf_left_third`, `gf_middle_third`, `gf_right_third` | a 2.5-ös kiadás óta elavult | az oszlopkezelés |
| `gf_first_quarter`, `gf_second_quarter`, `gf_third_quarter`, `gf_fourth_quarter` | a 2.5-ös kiadás óta elavult | az oszlopkezelés |
| `gf_inline` | a 2.5-ös kiadás óta elavult | az oszlopkezelés |
| `gf_list_2col`, `gf_list_3col`, `gf_list_4col`, `gf_list_5col` | az elavulás a 4.0-ás kiadásban várható | a mező **Lehetőségek elrendezése** beállítása (**Oszlopok**) |
| `gf_list_2col_vertical`, `gf_list_3col_vertical`, `gf_list_4col_vertical`, `gf_list_5col_vertical` | az elavulás a 4.0-ás kiadásban várható | ugyanaz, **Oszlopok szerinti elrendezés**: **Le** |
| `gf_list_inline` | az elavulás a 4.0-ás kiadásban várható | váltás a Többválasztós mezőre és a vízszintes elrendezésre, vagy saját CSS (lásd lent) |
| `gf_list_height_25`, `gf_list_height_50`, `gf_list_height_75`, `gf_list_height_100`, `gf_list_height_125`, `gf_list_height_150` | az elavulás a 4.0-ás kiadásban várható | nem kell semmi: a modern CSS egyforma magasan jeleníti meg a lehetőségeket |
| `gf_alert_green`, `gf_alert_red`, `gf_alert_yellow`, `gf_alert_gray`, `gf_alert_blue` | a 2.9.15-ös kiadás óta elavult | saját CSS |
| `gf_confirmation_simple_yellow`, `gf_confirmation_simple_gray`, `gf_confirmation_yellow_gradient`, `gf_confirmation_green_gradient` | a 2.9.15-ös kiadás óta elavult | saját CSS |
| `gf_simple_horizontal` | a 2.6-os kiadás óta elavult | az oszlopkezelés és a küldés gomb helyének beállítása |
| `gf_scroll_text`, `gf_hide_ampm`, `gf_invisible`, `gf_hide_charleft` | a 2.9.15-ös kiadás óta elavult | saját CSS |

### Kódrészletek a saját CSS-hez

A kódot a testreszabóba (**Megjelenés → Testreszabás**) vagy a gyermektéma stíluslapjába másold. A `gf_alert_blue` osztályra nincs kész minta, azt a többi riasztás mintájára te állíthatod elő.

**gf_list_inline** (a lehetőségek egymás mellett, törésekkel):

```css
.gform-theme--framework .gfield--type-choice.gf_list_inline .gfield_checkbox,
.gform-theme--framework .gfield--type-choice.gf_list_inline .gfield_radio {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 16px;
}
```

**Riasztások a HTML mezőben** (zöld, piros, sárga, szürke):

```css
.gform_wrapper .gfield.gfield_html .gf_alert_green {
	border-radius: 3px;
	margin-block: 1.25rem !important;
	margin-inline: 0 !important;
	padding: 1.25rem !important;
	background-color: #cbeca0;
	border: 1px solid #97b48a;
	color: #030;
	text-shadow: #dfb 1px 1px;
}

.gform_wrapper .gfield.gfield_html .gf_alert_red {
	border-radius: 3px;
	margin-block: 1.25rem !important;
	margin-inline: 0 !important;
	padding: 1.25rem !important;
	background-color: #faf2f5;
	border: 1px solid #cfadb3;
	color: #832525;
	text-shadow: #fff 1px 1px;
}

.gform_wrapper .gfield.gfield_html .gf_alert_yellow {
	border-radius: 3px;
	margin-block: 1.25rem !important;
	margin-inline: 0 !important;
	padding: 1.25rem !important;
	background-color: #fffbcc;
	border: 1px solid #e6db55;
	color: #222;
	text-shadow: #fcfaea 1px 1px;
}

.gform_wrapper .gfield.gfield_html .gf_alert_gray {
	border-radius: 3px;
	margin-block: 1.25rem !important;
	margin-inline: 0 !important;
	padding: 1.25rem !important;
	background-color: #eee;
	border: 1px solid #ccc;
	color: #424242;
	text-shadow: #fff 1px 1px;
}
```

**Visszaigazolások** (egyszerű sárga és szürke):

```css
.gform_confirmation_wrapper .gf_confirmation_simple_yellow {
	background-color: #fffbcc;
	border-block: 1px solid #e6db55;
	color: #424242;
	font-size: 25px;
	margin-block: 30px;
	margin-inline: 0;
	max-inline-size: 99%;
	padding: 32px;
}

.gform_confirmation_wrapper .gf_confirmation_simple_gray {
	background-color: #eaeaea;
	border-block: 1px solid #ccc;
	color: #424242;
	font-size: 25px;
	margin-block: 30px;
	margin-inline: 0;
	max-inline-size: 99%;
	padding: 32px;
}
```

**Visszaigazolások** (sárga és zöld átmenetes, árnyékkal):

```css
.gform_confirmation_wrapper .gf_confirmation_yellow_gradient {
	background-color: #fffbd2;
	border: 1px solid #e6db55;
	box-shadow: 0 0 5px rgba(221, 215, 131, 0.75);
	margin-block: 30px;
	margin-inline: 0;
	position: relative;
}

.gform_confirmation_wrapper .gf_confirmation_yellow_gradient .gform_confirmation_message {
	background: linear-gradient(to bottom, #fffce5 0%, #fff9bf 100%);
	background-color: #fffbcc;
	border-block-end: 1px solid #e6db55;
	border-block-start: 2px solid #fff;
	color: #424242;
	font-size: 28px;
	margin: 0;
	max-inline-size: 99%;
	padding: 40px;
}

.gform_confirmation_wrapper .gf_confirmation_yellow_gradient::before,
.gform_confirmation_wrapper .gf_confirmation_yellow_gradient::after {
	background: rgba(0, 0, 0, 0.2);
	box-shadow: 0 15px 10px rgba(0, 0, 0, 0.2);
	content: "";
	inline-size: 50%;
	inset-block: 80% 15px;
	inset-inline-start: 10px;
	max-inline-size: 40%;
	position: absolute;
	transform: rotate(-3deg);
	z-index: -1;
}

.gform_confirmation_wrapper .gf_confirmation_green_gradient {
	background-color: #f1fcdf;
	border: 1px solid #a7c37c;
	box-shadow: 0 0 5px rgba(86, 122, 86, 0.4);
	margin-block: 30px;
	margin-inline: 0;
	position: relative;
}

.gform_confirmation_wrapper .gf_confirmation_green_gradient .gform_confirmation_message {
	background: linear-gradient(to bottom, rgba(219, 242, 183, 1) 0%, rgba(180, 208, 136, 1) 100%);
	background-color: #fffbcc;
	border-block-end: 1px solid #a7c37c;
	border-block-start: 2px solid #effade;
	color: #030;
	font-size: 28px;
	margin: 0;
	max-inline-size: 99%;
	padding: 40px;
	text-shadow: #dfb 1px 1px;
}

.gform_confirmation_wrapper .gf_confirmation_green_gradient::before,
.gform_confirmation_wrapper .gf_confirmation_green_gradient::after {
	background: rgba(0, 0, 0, 0.2);
	box-shadow: 0 15px 10px rgba(0, 0, 0, 0.2);
	content: "";
	inline-size: 50%;
	inset-block: 80% 15px;
	inset-inline-start: 10px;
	max-inline-size: 40%;
	position: absolute;
	transform: rotate(-3deg);
	z-index: -1;
}
```

**gf_scroll_text** (görgethető szakaszszöveg), **gf_hide_ampm** (a de./du. választó elrejtése), **gf_hide_charleft** (a karakterszámláló elrejtése) és **gf_invisible** (a mező láthatatlanná tétele úgy, hogy az űrlap kezelni tudja):

```css
.gform_wrapper .gsection.gf_scroll_text {
	background-color: #fff;
	block-size: 15rem;
	border: 1px solid #ccc;
	overflow-x: hidden;
	overflow-y: scroll;
	padding: 2rem;
}

.gform_wrapper .gsection.gf_scroll_text .gsection_title {
	margin-block-start: 0;
}

.gform_wrapper .gf_hide_ampm .gfield_time_ampm {
	display: none !important;
}

.gform_wrapper .gf_hide_charleft .charleft {
	display: none !important;
}

.gform_wrapper .gf_invisible {
	left: -9999px;
	position: absolute;
	visibility: hidden;
}
```