# Az űrlap dátum- és időmezőjének helyőrzője nem látszik mobilon

> Az űrlap dátum- és időmezői mobilon üresen jelennek meg: a natív HTML5 kikapcsolása vagy egyedi kód segít.

## A hiba

Az űrlap dátum- és időmezőinek helyőrző szövege nem jelenik meg, ha az oldalt mobilon nyitod meg: a mezők üresnek látszanak.

> **Megjegyzés:** a hiba csak valódi mobilkészüléken jelentkezik. Ha az oldalt az Elementor szerkesztőjében nézed mobil nézetben, a helyőrzők látszanak.

Az ok az, ahogyan a HTML5 kezeli a dátum- és időmezőket.

## Megoldás

Két megoldás van:

- kapcsold ki a mező **Natív HTML5** beállítását,
- vagy add hozzá az űrlaphoz az alábbi egyedi kódot.

### A natív HTML5 kikapcsolása

1. Az űrlap widgetben nyisd meg a dátum- vagy időmezőt.
2. Állítsd a **Natív HTML5** kapcsolót kikapcsolt állapotba.

### Egyedi kód hozzáadása

> **Megjegyzés:** egyedi kódot csak Elementor Pro-val adhatsz hozzá.

1. A WordPress adminban nyisd meg az **Elementor → Szerkesztő** oldalt, és a bal oldali panelen az **Egyéni Elemek → Kód** pontot. Itt az **Egyéni kód** oldal jelenik meg.
2. Kattints az **Új kód** gombra.
3. Adj címet az egyedi kódnak.
4. A **Hely** legördülő listában válaszd a `<body>` eleji pozíciót.
5. Másold a kódmezőbe az alábbi kódot:

```html
<style>
.custom-cls-form .elementor-date-field {
  -webkit-appearance: none;
}
.custom-cls-form .elementor-date-field:before {
  content: attr(placeholder);
}
.custom-cls-form .elementor-date-field.date-selected:before {
  content: "" !important;
}
.custom-cls-form input::-webkit-date-and-time-value {
  text-align: left !important;
  width: 100% !important;
  display: block !important;
  position: absolute;
}
</style>
<script>
jQuery(document).on('change', '.custom-cls-form .elementor-date-field', function () {
  if (jQuery(this).val() !== '') {
    jQuery(this).addClass('date-selected');
  } else {
    jQuery(this).removeClass('date-selected');
  }
});
</script>
```

6. Kattints a **Közzététel** gombra, majd a mentés és bezárás gombra.

![Az Egyéni kód oldal az Új kód gombbal](./kepek/hibaelharitas-egyedi-kod-uj.webp)

*Az Egyéni kód oldal az Új kód gombbal* (https://minta-bolt.hu/wp-admin/edit.php?post_type=elementor_snippet)

A képen az **Egyéni kód** lista látszik a jobb felső sarokban az **Új kód** gombbal.

> **Tipp:** korlátozhatod, hogy a kód a webhely mely részein fusson, de a legegyszerűbb az egész webhelyre alkalmazni.

Utolsó lépésként add meg az űrlapnak a kódhoz tartozó osztályt:

1. Nyisd meg a szerkesztőben az űrlapot tartalmazó oldalt, és jelöld ki az űrlapot.
2. Kattints a **Haladó** fülre.
3. Az **Elrendezés** szakasz **CSS osztályok** mezőjébe írd be: `custom-cls-form`

Ezután az űrlapok mobilon is helyesen jelennek meg.