Darstellung mit Datumspicker

[EnricoSchiller]

Hallo! Wenn ein Picker für ein Feld aktiviert wird dann bricht dieser in Contao 4.9 in eine neue Zeile um und steht nicht direkt neben dem Input.
Im Contao CSS findet sich dazu

	.wizard .tl_text,
	.wizard .tl_select {
	    width: calc(100% - 24px);
	}

Jedoch müsste im ColumnWizard es -34px heißen damit es nicht umbricht. Es braucht also noch eine Ergänzung im CSS des Bundles

[zonky2]

poste bitte mal Dein DCA

[EnricoSchiller]

<?php

$GLOBALS['TL_DCA']['tl_qf_openings'] = array
(

    // Config
    'config' => array
    (
        'dataContainer' => 'Table',
        'enableVersioning' => true,
        'sql' => array
        (
            'keys' => array
            (
                'id' => 'primary',
            )
        )
    ),

    // List
    'list' => array
    (
        'sorting' => array
        (
            'mode' => 0,
        ),
        'label' => array
        (
            'fields' => array('alias'),
            'format' => '%s',
        ),
        'global_operations' => array
        (
            'all' => array
            (
                'label' => &$GLOBALS['TL_LANG']['MSC']['all'],
                'href' => 'act=select',
                'class' => 'header_edit_all',
                'attributes' => 'onclick="Backend.getScrollOffset();" accesskey="e"'
            ),
        ),
        'operations' => array
        (
            'edit' => array
            (
                'label' => &$GLOBALS['TL_LANG']['tl_qf_openings']['edit'],
                'href' => 'act=edit',
                'icon' => 'edit.gif'
            ),
            'copy' => array
            (
                'label' => &$GLOBALS['TL_LANG']['tl_qf_openings']['copy'],
                'href' => 'act=copy',
                'icon' => 'copy.gif'
            ),
            'delete' => array
            (
                'label' => &$GLOBALS['TL_LANG']['tl_qf_openings']['delete'],
                'href' => 'act=delete',
                'icon' => 'delete.gif',
                'attributes' => 'onclick="if(!confirm(\'' . $GLOBALS['TL_LANG']['MSC']['deleteConfirm'] . '\'))return false;Backend.getScrollOffset()"'
            ),
            'show' => array
            (
                'label' => &$GLOBALS['TL_LANG']['tl_qf_openings']['show'],
                'href' => 'act=show',
                'icon' => 'show.gif'
            )
        )
    ),
    
    // Palettes
    'palettes' => array
    (
        'default' => 'alias,openings;'
    ),

    // Fields
    'fields' => array
    (
        'id' => array
        (
            'sql' => "int(10) unsigned NOT NULL auto_increment"
        ),
        'tstamp' => array
        (
            'sql' => "int(10) unsigned NOT NULL default '0'"
        ),
        'alias' => array
        (
            'label' => array('Alias', ''),
            'inputType' => 'text',
            'eval' => array(
                'unique' => true,
                'rgxp'=>'folderalias',
                'mandatory' => true,
                'maxlength' => 128
            ),
            'sql' => "varchar(128) BINARY NOT NULL default ''"
        ),
        'openings' => array
        (
            'label' => array('Öffnungszeiten', ''),
            'inputType' => 'multiColumnWizard',
            'eval' => [
                'mandatory' => true,
                'minCount' => 7,
                'maxCount' => 7,
                'hideButtons' => true,
                'columnFields' => [
                    'op_day' => [
                        'label' => ['Wochentag'],
                        'exclude' => true,
                        'inputType' => 'select',
                        'eval' => [
                            'style' => 'width:150px',
                        ],
                        'options' => [
                            'mo' => 'Montag',
                            'di' => 'Dienstag',
                            'mi' => 'Mittwoch',
                            'do' => 'Donnerstag',
                            'fr' => 'Freitag',
                            'sa' => 'Samstag',
                            'so' => 'Sonntag',
                        ],
                    ],
                    'op_closed' => [
                        'label' => ['Nicht geöffnet'],
                        'exclude' => true,
                        'inputType' => 'checkbox',
                    ],
                    'op_startTime' => [
                        'label' => ['Geöffnet ab'],
                        'exclude' => true,
                        'eval' => ['rgxp' => 'time','datepicker' => true,'tl_class'=>'w50 wizard'],
                        'inputType' => 'text',
                    ],
                    'op_endTime' => [
                        'label' => ['Geschlossen ab'],
                        'exclude' => true,
                        'eval' => ['rgxp' => 'time','datepicker' => true,'tl_class'=>'w50 wizard'],
                        'inputType' => 'text',
                    ],
                    'op_note' => [
                        'label' => ['Hinweis (optional)'],
                        'exclude' => true,
                        'inputType' => 'text',
                    ],
                ],
            ],
            'sql' => 'blob NULL',
        ),
    )
);

[zonky2]

die td haben ein padding-r von 3px, das Icon 20px Breite + Margin-l von 4px = 24px

eigentlich wäre das dann calc(100% - (3px + 24px)) - inkl. Rundungsfehler calc(100% - 28px)

Problem ist zudem, dass der Picker "Weltkugel" nur mit 16x16px von Contao kommt

                'op_endTime'   => [
                    'label'     => ['Geschlossen ab'],
                    'exclude'   => true,
                    'inputType' => 'text',
                    'eval'      => [
                        'fieldType' => 'checkbox',
                        'filesOnly' => false,
                        'dcaPicker' => ['providers' => ['pagePicker']],
                        'tl_class'  => 'w50 wizard'
                    ],
                ],

aktuell kannst Du mit style in eval arbeiten und die Breite anpassen

was steht im Contao-CSS?

gern mal einen PR machen

[Total-Reality]

Bei mir tritt das nur auf, wenn man die Klasse "w50" verwendet.
Das mache ich aber nie, ich verwende immer bspw. die Angabe 'style'=>'width:100px'
Dann tritt das nicht auf.

[zonky2]

Bei mir tritt das nur auf, wenn man die Klasse "w50" verwendet.
Das mache ich aber nie, ich verwende immer bspw. die Angabe 'style'=>'width:100px'
Dann tritt das nicht auf.

das ist kein Argument - muss in allen Einstellungsmöglichkeiten funktionieren

[Total-Reality]

Das sollte kein Argument sein, dass man es gar nicht fixen sollte, sondern nur als Workaround dienen und ggf. näher bringen, dass diese Aufgabe nicht die höchste Prio hat, da man das Problem ja umgehen kann.

[Total-Reality]

Was spricht dagegen noch eine Zeile CSS-Code zu ergänzen?

.multicolumnwizard .wizard .tl_text {
    width: calc(100% - 36px);
}

Außerdem muss noch folgender Code ergänzt werden, damit es keine Fehldarstellung/Verzerrung bei Fehlermeldung "Invalid date" kommt:

.multicolumnwizard .wizard img {
    position: absolute;
    right: 12px;
    top: 8px;
}