Project

General

Profile

Actions

Bug #92912

closed

Datepicker flatpickr overlayed by text/checkbox (z-index)

Added by Imko Schumacher over 3 years ago. Updated over 3 years ago.

Status:
Closed
Priority:
Should have
Category:
Backend User Interface
Target version:
-
Start date:
2020-11-23
Due date:
% Done:

100%

Estimated time:
TYPO3 Version:
11
PHP Version:
Tags:
datepicker, flatpickr, z-index
Complexity:
Is Regression:
Sprint Focus:

Description

The new datetime picker (Task #91606) is overlayed by other form elements (e.g. checkbox to enable fields).
This is a problem with the CSS z-index.

Requirement

  • current master (e.g. e3746d4454f978bb18065d9d838cbcaee4c0b49d)

Steps to reproduce

TCA:
  • One input with 'renderType' => 'inputDateTime'
  • multiple optional fields below
Steps:
  1. Edit a record in the backend
  2. Open the datepicker

Example (TCA):

'a' => [
    'config' => [
        'type' => 'input',
        'renderType' => 'inputDateTime',
        'eval' => 'datetime,null',
    ],
],
'b' => [
    'config' => [
        'type' => 'input',
        'renderType' => 'inputDateTime',
        'eval' => 'time,null',
    ],
],

Actual result

The checkbox is visible through the dialog (marked with red arrow)

Expected result

The checkbox should not be visible through the datepicker dialog.
Note: edited with developer tools

Additional notes

- The datepicker .flatpickr-calendar.open has the z-index 100
- The checkbox .t3-form-field-eval-null-checkbox has the z-index 150


Files

datepicker-overlayed.png (13.1 KB) datepicker-overlayed.png Imko Schumacher, 2020-11-23 20:19
datepicker-expected.png (7.34 KB) datepicker-expected.png Imko Schumacher, 2020-11-23 20:35

Related issues 1 (0 open1 closed)

Related to TYPO3 Core - Task #91606: Replace bootstrap-datetime pickerClosedAndreas Kienast2020-06-08

Actions
Actions

Also available in: Atom PDF