View Issue Details

IDProjectCategoryView StatusLast Update
0021694mantisbtuipublic2023-10-31 16:36
Reportercproensa Assigned Tosyncguru  
PrioritynormalSeverityminorReproducibilityhave not tried
Status assignedResolutionopen 
Product Version2.0.0-beta.2 
Target Version2.27.0 
Summary0021694: inconsistent presentation of required fields
Description

The mark for required fields is styled inconsistently on several forms
Attached is example of two where the presentation differs.

"my account" form, the "" is separated from text
"report page", the "
" has no separation

The underlying issue is that now the "required" symbol has to be written explicitly in the HTML. In version 1.3 this was inserted by css :before

TagsNo tags attached.
Attached Files
Selección_046.png (8,253 bytes)   
Selección_046.png (8,253 bytes)   
Selección_047.png (13,670 bytes)   
Selección_047.png (13,670 bytes)   

Relationships

related to 0023213 new Required standard fields are not marked as required when updating issues 
related to 0021807 closedcommunity The required fields are not explicitly visible when updating, resolving or closing an issue 
related to 0022310 closedcommunity Use HTML5 "required" attribute for required form fields 

Activities

mcmo

mcmo

2016-10-19 04:53

reporter   ~0054268

this is also the case in v2.0.0-beta.3

cproensa

cproensa

2017-09-03 19:05

developer   ~0057602

This is the css that was used in v1.3

div.form-container fieldset label.required:before,
th label.required:before,
td label.required:before {
    font-size: 8pt;
    content: '* ';
    color: red;
}

should we apply something like that, instead of explicitly printing the *?

dregad

dregad

2017-09-04 07:12

developer   ~0057606

Last edited: 2017-09-04 07:14

should we apply something like that, instead of explicitly printing the *?

IMO, yes, that would be much better

EDIT: maybe consider using a margin-right for the spacing instead of hardcoded space (and we should make sure it works with RTL as well)

atrol

atrol

2017-09-04 10:38

developer   ~0057609

Last edited: 2017-09-04 12:06

@dregad @cproensa
Are you aware of css/common_config.php which deals with required class?

div.form-container fieldset.required:after {
    position: absolute;
    margin: -1.75em 0em 0em .5em;
    font-size: 8pt;
    content: '* <?php echo lang_get( 'required' ); ?>';
    color: red;
}

This approach allows to implement also language dependant display (Assuming that * is not the best characater e.g, for Chinese).
But I thought also about removing this generated CSS as it's not cached in browser and generated / delivered again and again.
Maybe delivering static content and having something like lang/css/english.css lang/css/german.css ...

Another thing to consider would be Translatewiki.

[Edit 1] And while we are on it, we should also consider HTML5 client side validation, https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_required

https://github.com/mantisbt/mantisbt/pull/1026

[Edit 2] The HTML5 required attribute could also be used for styling https://css-tricks.com/almanac/selectors/r/required/

dregad

dregad

2017-09-05 05:25

developer   ~0057611

@atrol This CSS was used to display the "legend" for the asterisk marking mandatory fields, at the form's bottom in Mantis 1.3. As far as I can tell, it is no longer used in 2.0 (git grep 'fieldset.*class' yields no results in php files), so the style could probably be removed.

Note: an alternative to the dynamic stylesheet could be to use a jQuery AJAX to get the language string, which would probably be easier than maintaining many language-specific static CSS files.

Re: client side validation, required only checks that the field is effectively not empty; a single space bypasses that. But anyway using this attribute makes perfect sense.

cproensa

cproensa

2017-09-05 07:38

developer   ~0057612

Ideally, with PR 1026, required inputs would be identified by it's "required" property.

If we still want to add a "*" to labels, we could base the display of that on the related input's property.
Afaik, this can't be done directly in css, when having
<label for="xxx"></label> <input id="xxx">

However, if having a label.required style, this class can be added with js to those labels linked to required inputs.
(Or simply use it staticly on the label)

atrol

atrol

2017-09-05 08:05

developer   ~0057614

As far as I can tell, it is no longer used in 2.0

Right, didn't find any usage, opened 0023310 to remove it.