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

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:

<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.

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.