View Issue Details

This bug affects 1 person(s).
 8
IDProjectCategoryView StatusLast Update
10978Feature requestsSurvey takingpublic2016-04-25 14:06
ReporterDenisChenu Assigned To 
PrioritynoneSeverityfeature 
Status newResolutionopen 
Summary10978: Remove empty label system (awesome-bootstrap-checkbox)
Description

To use awesome-bootstrap-checkbox in template : there are empty label everywhere .... Think:

  • it's really a bad idea
  • add JS event: we already have a lot of js : this can broke browser time (we already have a lot of events with EM, readding one just for something than can be done in CSS only seems bad)
  • Make hardest for another template to use own system
Steps To Reproduce

Look at 5 radio button HTML

Additional Information

The html produced is
<div class="col-xs-12 col-sm-2 answer-item radio-item col-md-1 radio">
<input type="radio" onclick="checkconditions(this.value, this.name, this.type)" value="1" id="answer89495X13X671" name="89495X13X67" class="radio">
<label class="answertext radio-label" for="answer89495X13X671"></label>

&lt;!--
     The label text is provided inside a div,
     so final user can add paragraph, div, or whatever he wants in the subquestion text
     This field is related to the input thanks to attribute aria-labelledby
-->
&lt;div id=&quot;label-answer89495X13X671&quot; class=&quot;label-text label-clickable&quot;>
    1    &lt;/div>

</div>

SOlution to allow div is
<div class="col-xs-12 col-sm-2 answer-item radio-item col-md-1 radio">
<input type="radio" onclick="checkconditions(this.value, this.name, this.type)" value="1" id="answer89495X13X671" name="89495X13X67" class="radio">
<div id="label-answer89495X13X671" class="label-text label-clickable">
1 </div>
</div>

remove the empty label. awesome-bootstrap-checkbox can be forked /pull requested to use class and not element (for example)

.checkbox .awesome-label::before {etc}

TagsNo tags attached.
Bug heat8
Story point estimate
Users affected %

Users monitoring this issue

Liod_DS

Activities

DenisChenu

DenisChenu

2016-04-19 10:33

developer   ~37530

Last edited: 2016-04-19 10:34

Alternative solution :

<div class="col-xs-12 col-sm-2 answer-item radio-item col-md-1 radio">
<input type="radio" onclick="checkconditions(this.value, this.name, this.type)" value="1" id="answer89495X13X671" name="89495X13X67" class="radio">
<label id="label-answer89495X13X671" class="label-text label-clickable">
1 </label>
</div>

Then : we don't need any JS : label is activated.

Because : by default : answer/subquestion part don't have HTML editor. User can broke HTML validator, but in great majority answer/subquestoion are really inlined.

Must discuss at dev meeting.

Alteranet 2:
<label class="col-xs-12 col-sm-2 answer-item radio-item col-md-1 radio">
<input type="radio" onclick="checkconditions(this.value, this.name, this.type)" value="1" id="answer89495X13X671" name="89495X13X67" class="radio">
<span id="label-answer89495X13X671" class="label-text label-clickable awesome-label">
1 </span>
</label>

ollehar

ollehar

2016-04-19 12:18

administrator   ~37534

Did you test this locally?

DenisChenu

DenisChenu

2016-04-19 12:19

developer   ~37536

One alternative solution ?
http://testing.sondages.pro/masterall/

Didn't test : because awesome-bootstrap-checkbox is a template issue : not a core issue.

You mean : did i test one of the solution ?

ollehar

ollehar

2016-04-19 12:21

administrator   ~37537

Yes, did you try your solution? :)

DenisChenu

DenisChenu

2016-04-19 14:49

developer   ~37548

I propose 3 fix, and actually : all HTML part is redone 3/4 times a week.
I don't fix whole HTML if this is brolken again 1 week after

DenisChenu

DenisChenu

2016-04-19 15:03

developer   ~37549

I vote for
<label class="col-xs-12 col-sm-2 answer-item radio-item col-md-1">
<input type="radio" onclick="checkconditions(this.value, this.name, this.type)" value="1" id="answer89495X13X671" name="89495X13X67" class="radio">
<span id="label-answer89495X13X671" class="label-text label-clickable awesome-label">
1 </span>
</label>

Can broken HTML validity : div inside span : but more clean for majority.

LouisGac

LouisGac

2016-04-22 09:59

developer   ~37671

Broken HTML is worst than empty label.

DenisChenu

DenisChenu

2016-04-22 10:08

developer   ~37672

Last edited: 2016-04-22 10:22

I'm not sure here ....

And broken HTML happen only in few case. And more with a lot of user we have surely some user who put

< strong>< p>Text </p>
< p>ANother text</p>
</strong>
=> broken HTML validators flow too.

And it break HTML validator but not HTML.

I think it's best to use n

1 : <div class="radio-item"><input type="radio"><label>The label</label></div>
2 : <label class="radio-item"><input type="radio"><span class="radio-label">The label</span></label>

With 1 : no need to update awesome-bootstrap-checkbox
With 2 : need to update/fix awesome-bootstrap-checkbox but can be in a pull request of awesome-bootstrap-checkbox

LouisGac

LouisGac

2016-04-22 10:20

developer   ~37674

Last edited: 2016-04-22 10:21

Denis: you're the one who first complained about the input being inside the label. Now that we've put out the input outside the label, you're complaining and ask to put back the input inside the label. At the same time, you're complaining that we change the HTML all the time....

You're also the one who pointed out that users could insert div, paragraph, tables, iframes, flash animatiosn, pictures, or anything else as label text. That's why I remove the label text from the label to an external div, linking this external div to the input with aria-labelledby, as you suggested. Now, you're asking to undo that work you asked for, and complain that we change the HTML all the time...

I agree I'd prefer not to have the empty label. As far as I know, it's not making any problem. Meanwhile, putting back the label text inside the label will make HTML validation problem. Google form is not using any label at all (nor any visible input), they're using only div and hidden input. IMHO, it's because they also went through all that debate.

DenisChenu

DenisChenu

2016-04-22 10:29

developer   ~37675

Hi,

I never say : <strong>put an empty label</strong>.

You ask me solution by IRC at me only (why not discuss really of HTML flow at a dev metting ? Why not make some wiki pâge before ? Why not put a dev mantis and give the link to all dev ... etc ...).

I inform some user can add div inside subquestion, and that can broke HTML validator: this must be thinking but the way to fix it is unsure.

You want 3rd solution :
div class wrapper
input
div class label

Then OK, but i never make any decision on this whole HTML update ... It's exactly what i mean : if you want to fix HTML flow really, then do it with the cleanest way , and spoke to some user/dev before ...

LouisGac

LouisGac

2016-04-22 10:41

developer   ~37676

Last edited: 2016-04-22 10:41

You asked for all the other things you're now asking to remove, and you asked for them include in the bug tracker. Like here:
https://bugs.limesurvey.org/view.php?id=10530#c35967

Where your asking for the exact contrary that you're asking here (but already complain that the HTML changes all the time).

The label is necessary for Awesome Bootstrap Checkboxes.
The text label can contain block elements, breaking HTML validity if inside a label element.

An empty label doesn't make any problem. So, why do you want to remove it?

DenisChenu

DenisChenu

2016-04-22 10:48

developer   ~37677

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

OR
input
label
text-node
/label

You see a text-node inside label ....

You add an empty label just for Awesome Bootstrap Checkboxes: NO other vreason ... don't tell me i ask an empty label .....

I think add an empty "anything" jsut for a css (who can be updated) don't make flexible, durable, and sustainable HTML

LouisGac

LouisGac

2016-04-22 10:53

developer   ~37678

Last edited: 2016-04-22 10:54

but do you see any actual problem, do you see any bug?
because putting back the label text inside the label makes bugs, we know it.
Removing the empty label would be the right solution.

We should directly speak with the ABC team to ask them to do it. They yet did it by the past:
https://github.com/flatlogic/awesome-bootstrap-checkbox/issues/17

I don't know why this feature were lost in the last versions.

DenisChenu

DenisChenu

2016-04-24 17:50

developer   ~37738

Move to feature request : OK, not a bug a request :)

The user can vote ;)

LouisGac

LouisGac

2016-04-25 14:06

developer   ~37798

still: if you find that the empty label is making any bug or problem, we'll remove it.

Issue History

Date Modified Username Field Change
2016-04-19 10:31 DenisChenu New Issue
2016-04-19 10:33 DenisChenu Note Added: 37530
2016-04-19 10:34 DenisChenu Note Edited: 37530
2016-04-19 12:18 ollehar Note Added: 37534
2016-04-19 12:19 DenisChenu Note Added: 37536
2016-04-19 12:21 ollehar Note Added: 37537
2016-04-19 14:49 DenisChenu Note Added: 37548
2016-04-19 15:03 DenisChenu Note Added: 37549
2016-04-20 09:59 Liod_DS Issue Monitored: Liod_DS
2016-04-20 12:57 ollehar Assigned To => ollehar
2016-04-20 12:57 ollehar Status new => assigned
2016-04-20 12:58 ollehar Assigned To ollehar => LouisGac
2016-04-20 14:22 DenisChenu Summary Remove empty lable system (awesome-bootstrap-checkbox) => Remove empty label system (awesome-bootstrap-checkbox)
2016-04-22 09:59 LouisGac Note Added: 37671
2016-04-22 10:08 DenisChenu Note Added: 37672
2016-04-22 10:20 LouisGac Note Added: 37674
2016-04-22 10:21 LouisGac Note Edited: 37674
2016-04-22 10:21 LouisGac Note Edited: 37674
2016-04-22 10:22 DenisChenu Note Edited: 37672
2016-04-22 10:29 DenisChenu Note Added: 37675
2016-04-22 10:41 LouisGac Note Added: 37676
2016-04-22 10:41 LouisGac Note Edited: 37676
2016-04-22 10:48 DenisChenu Note Added: 37677
2016-04-22 10:53 LouisGac Note Added: 37678
2016-04-22 10:54 LouisGac Note Edited: 37678
2016-04-24 17:49 DenisChenu Project Bug reports => Feature requests
2016-04-24 17:49 DenisChenu Severity @50@ => feature
2016-04-24 17:49 DenisChenu Product Version 2.5 =>
2016-04-24 17:49 DenisChenu Assigned To LouisGac =>
2016-04-24 17:50 DenisChenu Note Added: 37738
2016-04-24 17:50 DenisChenu Status assigned => new
2016-04-25 14:06 LouisGac Note Added: 37798