Bug #39558

reqImg CSS blocks radio button selection

Added by Xavier Perseguers 10 months ago. Updated 8 months ago.

Status:New Start date:2012-08-06
Priority:Should have Due date:
Assignee:- % Done:

0%

Category:TCEforms
Target version:-
TYPO3 Version:4.6 Complexity:
PHP Version:5.3
Votes: 2 (View)

Description

Class img.t3-TCEforms-reqImg may prevent the user from selecting a radio button by clicking on the radio icon itself.

See screenshot for a visual overlay of where this class is put in a form (I just added a red background to the class to make it visible)

User currently MUST click on the associated label (or at the very bottom left of the radio button) to select it.

Has been tested in all standard browsers where this behaviour has been reproduced.

reqImage.png (70.6 kB) Xavier Perseguers, 2012-08-06 18:50

History

Updated by Xavier Perseguers 10 months ago

Updated by Xavier Perseguers 10 months ago

Example of TCA to reproduce the fields:

'family_climbing' => array(
    'exclude' => 0,
    'label' => 'Family Climbing',
    'l10n_mode' => 'exclude',
    'config' => array(
        'type' => 'radio',
        'items' => array(
            array('Yes', '0'),
            array('No', '1'),
            array('Unknown', '2'),
        ),
        'default' => 2,
    )
),

Updated by Jigal van Hemert 9 months ago

Only solution I see is to make an tiny of 4-7 pixels wide (the room of the red triangle) and position it in front of the title.

Updated by Ernesto Bricca 9 months ago

radio middle button overlay also happens in typo3 v4.5

Updated by Xavier Perseguers 8 months ago

Temporarily fixed (hack) within a custom extension:

ext_tables.php

// Register our custom CSS
$GLOBALS['TBE_STYLES']['skins'][$_EXTKEY]['stylesheetDirectories']['structure'] = 'EXT:' . $_EXTKEY . '/Resources/Public/Css/structure/';

Resources/Public/Css/Structure/main_content.css

/* Temporary hack for http://forge.typo3.org/issues/39558 */
.checkbox, .radio, .checkbox:hover {
    margin-left: 30px;
}

Also available in: Atom PDF