View Issue Details

IDProjectCategoryView StatusLast Update
11448Bug reportsTheme editorpublic2017-07-21 17:07
ReporterDenisChenu Assigned ToDenisChenu  
PrioritynoneSeverityminor 
Status closedResolutionfixed 
Product Version2.50.x 
Target Version3.0.xFixed in Version3.0.x 
Summary11448: Unable to show list radio as button without JS
Description

In 2.06 and before : we can show label as button : using some css :

li.radio-item input.radio:checked + label, li.checkbox-item input.checkbox:checked + label {
background: #6789a0 none repeat scroll 0 0;
color: #fff;
}

example here : http://accessible.sondages.pro/89495

It's not possible actually : we have an empty label : then we can not access the background color of the real label.

Steps To Reproduce

Try to set a background color on :radio .label-clickable without javascript

Additional Information

Css speed is better than JS
JS file can be unloaded due to Browser restriction (in some company : it's the case).
Adding again a js system for this can break some other feature etc ....

There are really no reason to add an empty element .... except using awesome-bootstrap-checkbox without updating it (we already update a lot of think).
awesome-bootstrap-checkbox is a template specific system : update HTML for template specific is an error : HTML produced must not be template specific.

ANd more : awesome-bootstrap-checkbox can broke some survey (see https://bugs.limesurvey.org/view.php?id=11425 : fonts not loaded : broken system, and fonts are not loaded when user goes with a Phone connexion ....)

Tagsanswers_html
Complete LimeSurvey version number (& build)20160714
I will donate to the project if issue is resolvedNo
BrowserAll
Database & DB-Versionnot relevant
Server OS (if known)not relevant
Webserver software & version (if known)not relevant
PHP Versionnot relevant

Relationships

related to 11425 closed Bug reports Opera mobile : checkbox are not showned checked 
related to 11463 closedDenisChenu Bug reports Unable to vertical align Radio button without javascript 
related to 11449 closedDenisChenu Feature requests Readding real label 

Activities

LouisGac

LouisGac

2016-07-14 15:47

developer   ~39898

yes the logic is different, it use bootstrap awesome checkboxes:
https://github.com/flatlogic/awesome-bootstrap-checkbox

You can change it background color (it's yet different in the 3 core templates).

The empty label is because in LimeSurvey Admin interface, you can enter whatever you want in the question label : text, pictures, div, table, etc. So we can't push that content inside an inline element.

Having an empty label doesn't any problem.

DenisChenu

DenisChenu

2016-07-14 15:51

developer   ~39900

The empty label broke all CSS system : you can not have a clean way to
use
li.radio-item input.radio:checked + label, li.checkbox-item input.checkbox:checked + label {
background: #6789a0 none repeat scroll 0 0;
color: #fff;
}

I try this morning : really no clean way ..... due toi empty label.

DenisChenu

DenisChenu

2016-07-14 15:54

developer  

DenisChenu

DenisChenu

2016-07-14 15:54

developer  

Focused.png (35,874 bytes)   
Focused.png (35,874 bytes)   
DenisChenu

DenisChenu

2016-07-14 15:55

developer   ~39901

When i want to change bg color :
different color with hover/focus + not-checked + checked : there are no solution for this in any of the template

Send screenshit : able to do it in 2.06, not able to do it in 2.50

LouisGac

LouisGac

2016-07-14 15:58

developer   ~39903

yes, you can do it:

http://www.cssscript.com/demo/pretty-checkbox-radio-inputs-with-bootstrap-and-awesome-bootstrap-checkbox-css/

DenisChenu

DenisChenu

2016-07-14 16:00

developer   ~39906

Last edited: 2016-07-14 16:01

View 2 revisions

No : BACKGROUND of whole "answer" part ..... not only the "radio"

DenisChenu

DenisChenu

2016-07-14 16:04

developer   ~39907

Example : set disable option : your example show text grey.

Not in LimeSurvey : because it apply to label , not after ....

DenisChenu

DenisChenu

2016-07-14 16:04

developer  

DenisChenu

DenisChenu

2016-07-14 16:06

developer   ~39908

In fact : tehre are 2 solutions:

1 : Do or fix awesome-bootstrap-checkbox-css with .label-clickable and remove the empty label
2 : put the answer/question in lable like before : feature request 11449

LouisGac

LouisGac

2016-07-14 16:08

developer   ~39912

removing the empty label is not related to being able to change the background of anything.

DenisChenu

DenisChenu

2016-07-14 16:09

developer   ~39914

Mais si :

li.radio-item input.radio:checked + label, li.checkbox-item input.checkbox:checked + label {
background: #6789a0 none repeat scroll 0 0;
color: #fff;
}
Don't work

li.radio-item input.radio:checked + .label-clickable, li.checkbox-item input.checkbox:checked + .label-clickable {
background: #6789a0 none repeat scroll 0 0;
color: #fff;
}
Don't work

Second solution work if you remove the empty label .....

DenisChenu

DenisChenu

2016-07-18 09:23

developer   ~39937

Louis : i can do the pull request :

  • Remove this empty label OR readd a real label
  • Fix the core template to show the awesome checkbox like before

BUT : i don't want to work without your agreement on one or other of the methods

The only alternative is

  • Forking LimeSurvey
  • Do a plugin to fork all views

Because really : this empty label broke a lot of css things.

DenisChenu

DenisChenu

2016-10-07 18:31

developer   ~41201

Can be done now

c_schmitz

c_schmitz

2017-07-21 17:07

administrator   ~44134

Version 3.0.0-beta.1 released

Issue History

Date Modified Username Field Change
2016-07-14 12:03 DenisChenu New Issue
2016-07-14 12:14 DenisChenu Relationship added related to 11449
2016-07-14 12:14 DenisChenu Relationship added related to 11425
2016-07-14 15:47 LouisGac Note Added: 39898
2016-07-14 15:47 LouisGac Status new => resolved
2016-07-14 15:47 LouisGac Resolution open => no change required
2016-07-14 15:47 LouisGac Assigned To => LouisGac
2016-07-14 15:51 DenisChenu Note Added: 39900
2016-07-14 15:51 DenisChenu Status resolved => feedback
2016-07-14 15:51 DenisChenu Resolution no change required => reopened
2016-07-14 15:54 DenisChenu File Added: Capture du 2016-07-14 15-53-28.png
2016-07-14 15:54 DenisChenu File Added: Focused.png
2016-07-14 15:55 DenisChenu Note Added: 39901
2016-07-14 15:55 DenisChenu Status feedback => assigned
2016-07-14 15:58 LouisGac Note Added: 39903
2016-07-14 15:58 LouisGac Assigned To LouisGac =>
2016-07-14 16:00 DenisChenu Note Added: 39906
2016-07-14 16:01 DenisChenu Note Edited: 39906 View Revisions
2016-07-14 16:04 DenisChenu Note Added: 39907
2016-07-14 16:04 DenisChenu File Added: Capture du 2016-07-14 16-03-47.png
2016-07-14 16:06 DenisChenu Note Added: 39908
2016-07-14 16:06 DenisChenu Status assigned => new
2016-07-14 16:08 LouisGac Note Added: 39912
2016-07-14 16:09 DenisChenu Note Added: 39914
2016-07-18 09:23 DenisChenu Note Added: 39937
2016-07-18 09:23 DenisChenu Assigned To => LouisGac
2016-07-18 09:23 DenisChenu Status new => feedback
2016-07-18 09:23 DenisChenu Relationship added related to 11463
2016-07-28 16:53 DenisChenu Assigned To LouisGac => DenisChenu
2016-07-28 16:53 DenisChenu Status feedback => assigned
2016-10-04 18:43 DenisChenu Target Version => 3.0.x
2016-10-05 10:26 DenisChenu Tag Attached: answers_html
2016-10-07 18:31 DenisChenu Status assigned => resolved
2016-10-07 18:31 DenisChenu Resolution reopened => fixed
2016-10-07 18:31 DenisChenu Fixed in Version => 3.0.x
2016-10-07 18:31 DenisChenu Note Added: 41201
2017-07-21 17:07 c_schmitz Note Added: 44134
2017-07-21 17:07 c_schmitz Status resolved => closed