View Issue Details

Related ChangesetsJump to NotesJump to History
This bug affects 1 person(s).
 8
IDProjectCategoryView StatusDate SubmittedLast Update
10530Bug reportsTheme editorpublic2016-02-19 12:432016-05-03 16:54
ReporterNortonT Assigned ToLouisGac 
PriorityimmediateSeverityminor 
Status closedResolutionfixed 
Product Version2.50.x 
Summary10530: HTML for radio button form items inconsistent
Description

Generated HTML for radio button form items is inconsistent across question types. This makes it difficult to target all such elements effectively in template CSS.

Steps To Reproduce

Create any survey with multiple radio button type question and inspect HTML

Additional Information

Example HTML comparing question types is attached

TagsNo tags attached.
Attached Files
example.html (1,380 bytes)    
<!-- List Radio -->

<div id="javatbd379391X1X32" class="form-group answer-item radio-item">
	<label for="answer379391X1X32" class="control-label label-radio">
		<input class="radio" type="radio" value="2" name="379391X1X3" id="answer379391X1X32" onclick="if (document.getElementById('answer379391X1X3othertext') != null) document.getElementById('answer379391X1X3othertext').value='';checkconditions(this.value, this.name, this.type)">
        <span>Option 2</span>
	</label>
</div>

<!-- List 5 Point Choice -->

<div class="col-xs-2 answer-item radio-item">
    <input class="radio" type="radio" name="379391X1X1" id="answer379391X1X12" value="2" onclick="checkconditions(this.value, this.name, this.type)">
    <label for="answer379391X1X12" class="answertext">2</label>
</div>

<!-- List with Comment -->

<li class="answer-item radio-item ">
	<input type="radio" name="379391X1X4" id="answer379391X1X42" value="2" class="radio" onclick="checkconditions(this.value, this.name, this.type);">
	<label for="answer379391X1X42" class="answertext">Option 2</label>
</li>

<!-- Array -->

<td class="answer_cell_Y answer-item radio-item" title="">
	<label for="answer379391X2X111-Y">
		<input class="radio" type="radio" name="379391X2X111" id="answer379391X2X111-Y" value="Y" onclick="checkconditions(this.value, this.name, this.type)">
	</label>
</td>
example.html (1,380 bytes)   
limesurvey_survey_379391 (1).lss (83,502 bytes)
array-proposal.html (436 bytes)    
<!-- Existing -->
<label for="answer379391X2X51-1">
	<input class="radio" type="radio" name="379391X2X51" value="1" id="answer379391X2X51-1" onclick="checkconditions(this.value, this.name, this.type)" />
</label>

<!-- Proposed --> 
<input class="radio" type="radio" name="379391X2X51" value="1" id="answer379391X2X51-1" onclick="checkconditions(this.value, this.name, this.type)" />
<label for="answer379391X2X51-1"></label>
array-proposal.html (436 bytes)   
Bug heat8
Complete LimeSurvey version number (& build)
I will donate to the project if issue is resolved
Browser
Database type & version
Server OS (if known)
Webserver software & version (if known)
PHP Version

Relationships

Relationship GraphDependency Graph
related to 10621 closedLouisGac Empty label in "array NUMBER" 

Users monitoring this issue

There are no users monitoring this issue.

Activities

LouisGac

LouisGac

2016-03-04 11:17

developer   ~35961

Fix committed to master branch: http://bugs.limesurvey.org/plugin.php?page=Source/view&id=17762
LouisGac

LouisGac

2016-03-04 11:20

developer   ~35962

for arrays, it can't be the same HTML flow (the responsive logic being base on no-more-table approach ).
DenisChenu

DenisChenu

2016-03-04 11:37

developer   ~35967

Question : personnaly : i prefer:
label
text-node
/label
input

OR
input
label
text-node
/label

CSS hack is more easy.
Why use
label
text-node
input
/label

I don't like input inside label (and bootstrap exemple don't use it too.)
LouisGac

LouisGac

2016-03-04 12:27

developer   ~35968

Fix committed to master branch: http://bugs.limesurvey.org/plugin.php?page=Source/view&id=17766
LouisGac

LouisGac

2016-03-04 12:28

developer   ~35969

Denis : Ok I used your way of doing.
To answer to your question : For now, most of the JS solution to replace the checkbox/radio list ask for an input inside the label. So I did it as a preparation of the switch to javascripted inputs.

But I'll see when I'll do it. Maybe it will be ok with your flow.
DenisChenu

DenisChenu

2016-03-04 13:47

developer   ~35974

And css solution use separate label and input: http://www.thecssninja.com/css/custom-inputs-using-css

You have some link for radio update ?

Because;, for me : we don't need any label : http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Javascript don't need label , css need label.
NortonT

NortonT

2016-03-07 11:08

reporter   ~36008

Thanks for this.

Regarding arrays could the same basic structure not be applied here ie. the label following the input, rather than being wrapped around it.

I've attached a proposed structure which i believe to be workable, albeit it will require a tweak to the CSS in order to keep the radio button align centrally in the table cell.

I've tested this by changing qanda_helper.php (L4843-L4853) and it seems to work.
DenisChenu

DenisChenu

2016-03-07 11:14

developer   ~36010

Yes : more easy to fix if same system is used in table. But less urgent :)
NortonT

NortonT

2016-03-07 11:39

reporter   ~36015

Additionally I've just noticed that this issue also applies to checkboxes (this may warrant creating a new issue?)

Multiple Choice with Comments is formatted differently Multiple Choice.

I've suggest taking the approach of input followed by label as has been implemented for radio above.
LouisGac

LouisGac

2016-03-21 10:44

developer   ~36642

I known there were a good reason why I used input inside labels :

http://stackoverflow.com/questions/19145504/style-a-checkbox-in-firefox-remove-check-and-border

One of the most used solution for Firefox checkbox enhancement.
LouisGac

LouisGac

2016-03-21 11:11

developer   ~36645

also, google form put everything in the label, and just have an hidden input

eg:
https://docs.google.com/forms/d/1ckReW0XEgLtE8KR9vgxk2tTBwe8xCn8rQuRZNzQW7kE/prefill
LouisGac

LouisGac

2016-03-21 11:17

developer   ~36646

Material Design for Bootstrap use input inside label :
http://fezvrasta.github.io/bootstrap-material-design/#checkbox
DenisChenu

DenisChenu

2016-03-21 12:00

developer   ~36657

and Material Design for Bootstrap don't work without JS. Some of pour user have IE restrictions for all js.
LouisGac

LouisGac

2016-03-21 12:07

developer   ~36659

surveys doen't work without js denis...
DenisChenu

DenisChenu

2016-03-21 12:11

developer   ~36662

Last edited: 2016-03-21 12:11

Surveys work without JS ... we made a lot of effort for this ... except relevance in EM to fix : survey work without JS ....
c_schmitz

c_schmitz

2016-05-03 16:54

administrator   ~38164

Version 2.50+ Build 160504 released

Related Changesets

LimeSurvey: master d9ab5c60

2016-03-04 11:17

LouisGac


Details Diff		 Fixed issue 10530: HTML for radio button form items inconsistent Affected Issues
10530
mod - application/views/survey/questions/5pointchoice/item_noanswer_row.php Diff File
mod - application/views/survey/questions/5pointchoice/item_row.php Diff File
mod - application/views/survey/questions/list_with_comment/list/item.php Diff File
mod - application/views/survey/questions/listradio/item_row.php Diff File

LimeSurvey: master e8d10207

2016-03-04 12:26

LouisGac


Details Diff		 Fixed issue 10530: HTML for radio button form items inconsistent Affected Issues
10530
mod - application/views/survey/questions/5pointchoice/item_noanswer_row.php Diff File
mod - application/views/survey/questions/5pointchoice/item_row.php Diff File
mod - application/views/survey/questions/list_with_comment/list/item.php Diff File
mod - application/views/survey/questions/listradio/item_noanswer_row.php Diff File
mod - application/views/survey/questions/listradio/item_row.php Diff File

Issue History

Date Modified Username Field Change
2016-02-19 12:43 NortonT New Issue
2016-02-19 12:43 NortonT File Added: example.html
2016-02-19 12:43 NortonT File Added: limesurvey_survey_379391 (1).lss
2016-02-19 13:08 NortonT Issue Monitored: NortonT
2016-02-19 13:08 NortonT Issue End Monitor: NortonT
2016-02-20 17:47 DenisChenu Project Development => Bug reports
2016-02-20 17:47 DenisChenu Category Survey taking => Other issues
2016-02-21 19:32 c_schmitz Assigned To => LouisGac
2016-02-21 19:32 c_schmitz Status new => assigned
2016-02-21 19:32 c_schmitz Priority normal => high
2016-02-21 19:32 c_schmitz Category Other issues => Accessibility
2016-03-04 11:17 LouisGac Changeset attached => LimeSurvey master d9ab5c60
2016-03-04 11:17 LouisGac Note Added: 35961
2016-03-04 11:17 LouisGac Resolution open => fixed
2016-03-04 11:20 LouisGac Note Added: 35962
2016-03-04 11:20 LouisGac Status assigned => resolved
2016-03-04 11:37 DenisChenu Note Added: 35967
2016-03-04 12:27 LouisGac Changeset attached => LimeSurvey master e8d10207
2016-03-04 12:27 LouisGac Note Added: 35968
2016-03-04 12:28 LouisGac Note Added: 35969
2016-03-04 13:47 DenisChenu Note Added: 35974
2016-03-07 11:04 NortonT File Added: array-proposal.html
2016-03-07 11:08 NortonT Note Added: 36008
2016-03-07 11:08 NortonT Status resolved => feedback
2016-03-07 11:08 NortonT Resolution fixed => reopened
2016-03-07 11:14 DenisChenu Note Added: 36010
2016-03-07 11:39 NortonT Note Added: 36015
2016-03-07 11:39 NortonT Status feedback => assigned
2016-03-07 11:51 DenisChenu Relationship added related to 10621
2016-03-15 10:55 LouisGac Priority high => low
2016-03-17 09:15 DenisChenu Category Accessibility => Theme editor
2016-03-21 10:44 LouisGac Note Added: 36642
2016-03-21 11:11 LouisGac Note Added: 36645
2016-03-21 11:17 LouisGac Note Added: 36646
2016-03-21 12:00 DenisChenu Note Added: 36657
2016-03-21 12:07 LouisGac Note Added: 36659
2016-03-21 12:11 DenisChenu Note Added: 36662
2016-03-21 12:11 DenisChenu Note Edited: 36662
2016-05-02 18:22 LouisGac Priority low => immediate
2016-05-03 10:24 LouisGac Sticky Issue No => Yes
2016-05-03 16:29 LouisGac Sticky Issue Yes => No
2016-05-03 16:29 LouisGac Status assigned => resolved
2016-05-03 16:29 LouisGac Resolution reopened => fixed
2016-05-03 16:54 c_schmitz Note Added: 38164
2016-05-03 16:54 c_schmitz Status resolved => closed