Bug #92912

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

Added by Imko Schumacher about 1 year ago. Updated about 1 year 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

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

Actions
#1

Updated by Georg Ringer about 1 year ago

  • Status changed from New to Accepted
#2

Updated by Georg Ringer about 1 year ago

  • Related to Task #91606: Replace bootstrap-datetime picker added
#3

Updated by Georg Ringer about 1 year ago

  • Assignee set to Andreas Fernandez
#4

Updated by Gerrit Code Review about 1 year ago

  • Status changed from Accepted to Under Review

Patch set 1 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/66932

#5

Updated by Andreas Fernandez about 1 year ago

  • Status changed from Under Review to Resolved
  • % Done changed from 0 to 100
#6

Updated by Benni Mack about 1 year ago

  • Status changed from Resolved to Closed

Also available in: Atom PDF