Project

General

Profile

Actions
Copy link

Bug #98549

open

SVG icons with no explicit height/width are not displayed under singleSelect fields

Added by David Menzel over 1 year ago.

Status:
New
Priority:
Should have
Assignee:
-
Category:
Backend User Interface
Target version:
-
Start date:
2022-10-07
Due date:
% Done:

0%

Estimated time:
TYPO3 Version:
10
PHP Version:
7.4
Tags:
Complexity:
Is Regression:
Sprint Focus:

Description

When you have a singleSelect in BE and add some SVGs as icon and the SVG has to explicit width or height, then no icon is shown under the select field, for example the Backenlayout icons or a custom singleSelect.

TCA

        'tx_rds_header_color' => [
            'exclude' => true,
            'label' => 'Farbe',
            'description' => 'Beschreibung',
            'config' => [
                'type' => 'select',
                'renderType' => 'selectSingle',
                'items' => [
                    [
                        'Standard',
                        'default'
                    ],
                    [
                        'cyan',
                        'cyan',
                        'EXT:my_ext/Resources/Public/Icons/Colors/21ACCD.svg'
                    ],
                    [
                        'schwarzblau',
                        'schwarzblau',
                        'EXT:my_ext/Resources/Public/Icons/Colors/5F7DA0.svg'
                    ],
                    [
                        'white',
                        'white',
                        'EXT:my_ext/Resources/Public/Icons/Colors/FFFFFF.svg'
                    ]
                ],
                'fieldWizard' => [
                    'selectIcons' => [
                        'disabled' => false,
                    ],
                ],
            ],
        ],

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="24" height="24" style="fill:#5f7da0"/></svg>

Workaround: add height and width to SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><rect width="24" height="24" style="fill:#5f7da0"/></svg>

better solution:
Set a min-height and min-width in CSS for the places where the icons should be shown, in case no dimension was set in the SVG

Files

Download all files
grafik-css-icon.png (17.8 KB) grafik-css-icon.png Code: added min-height and min-width David Menzel, 2022-10-07 17:28
grafik-no_icon.png (5.73 KB) grafik-no_icon.png David Menzel, 2022-10-07 17:28
grafik-with-icon.png (2.08 KB) grafik-with-icon.png BE: added min-height and min-width David Menzel, 2022-10-07 17:28

No data to display

Actions
Copy link

Also available in: Atom PDF