View Issue Details

IDProjectCategoryView StatusLast Update
0021694mantisbtuipublic2017-12-04 02:25
ReportercproensaAssigned To 
PrioritynormalSeverityminorReproducibilityhave not tried
Status confirmedResolutionopen 
Product Version2.0.0-beta.2 
Target Version2.10.0Fixed in Version 
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

Tagsmodern-ui

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

cproensa

cproensa

2016-09-16 18:01

developer  

Selección_046.png (8,253 bytes)
Selección_046.png (8,253 bytes)
cproensa

cproensa

2016-09-16 18:01

developer  

Selección_047.png (13,670 bytes)
Selección_047.png (13,670 bytes)
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

View 2 revisions

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

View 5 revisions

@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.

Issue History

Date Modified Username Field Change
2016-09-16 18:01 cproensa New Issue
2016-09-16 18:01 cproensa File Added: Selección_046.png
2016-09-16 18:01 cproensa File Added: Selección_047.png
2016-09-16 18:01 cproensa Description Updated View Revisions
2016-09-16 18:02 cproensa Tag Attached: modern-ui
2016-10-19 04:53 mcmo File Added: 2016-10-19 10_52_54-Report Issue - MantisBT.png
2016-10-19 04:53 mcmo Note Added: 0054268
2016-10-19 05:03 atrol Relationship added related to 0021807
2016-10-19 05:23 dregad Status new => confirmed
2016-10-19 05:23 dregad Target Version => 2.0.0-rc.1
2016-10-30 23:23 vboctor Target Version 2.0.0-rc.1 => 2.0.0-rc.2
2016-11-27 08:20 dregad Target Version 2.0.0-rc.2 => 2.0.0
2016-12-30 15:56 vboctor Target Version 2.0.0 => 2.0.1
2017-02-01 22:49 vboctor Target Version 2.0.1 => 2.2.0
2017-02-26 21:19 vboctor Target Version 2.2.0 => 2.3.0
2017-04-01 00:20 vboctor Target Version 2.3.0 => 2.4.0
2017-04-30 14:53 vboctoradmin Target Version 2.4.0 => 2.5.0
2017-06-04 16:19 atrol Target Version 2.5.0 => 2.6.0
2017-09-03 18:50 vboctor Target Version 2.6.0 => 2.7.0
2017-09-03 19:05 cproensa Note Added: 0057602
2017-09-04 07:12 dregad Note Added: 0057606
2017-09-04 07:14 dregad Note Edited: 0057606 View Revisions
2017-09-04 10:35 atrol Relationship added related to 0023213
2017-09-04 10:38 atrol Note Added: 0057609
2017-09-04 10:45 atrol Note Edited: 0057609 View Revisions
2017-09-04 11:12 atrol Note Edited: 0057609 View Revisions
2017-09-04 12:06 atrol Note Edited: 0057609 View Revisions
2017-09-04 12:06 atrol Note Edited: 0057609 View Revisions
2017-09-05 05:25 dregad Note Added: 0057611
2017-09-05 05:42 dregad Relationship added related to 0022310
2017-09-05 07:38 cproensa Note Added: 0057612
2017-09-05 08:05 atrol Note Added: 0057614
2017-10-08 23:55 vboctor Target Version 2.7.0 => 2.8.0
2017-10-28 19:14 vboctor Target Version 2.8.0 => 2.9.0
2017-12-04 02:25 vboctor Target Version 2.9.0 => 2.10.0