View Issue Details

This bug affects 1 person(s).
 6
IDProjectCategoryView StatusLast Update
10080Bug reportsTheme editorpublic2016-01-08 15:35
ReporterDenisChenu Assigned ToLouisGac 
PrioritynormalSeverityminor 
Status closedResolutionfixed 
Product Version2.50.x 
Summary10080: Bad look of multiple text with "Input box width : 2"
Description

I think it's Input box width : 2 but this make a strange behaviour (look at picture).

Steps To Reproduce

Import docs/demosurvey/ls205_sample_survey_multilingual.lss and test (first group)

Additional Information

I don't think set Input box width must set "item" width. Maybe a new class but not the bootstrap class.

PS: there are a lot of other bug in template : but think some css can fix it. Here there are an HTML update.
Actually : seems there are a lack of jquery-ui.css (ranking/date) and some js error for slider.

TagsNo tags attached.
Attached Files
row-sm9-sm2.png (22,503 bytes)   
row-sm9-sm2.png (22,503 bytes)   
Bug heat6
Complete LimeSurvey version number (& build)151207
I will donate to the project if issue is resolvedNo
Browserfirefox
Database type & versionnot relevant
Server OS (if known)not relevant
Webserver software & version (if known)not relevant
PHP Versionnot relevant

Users monitoring this issue

There are no users monitoring this issue.

Activities

LouisGac

LouisGac

2015-12-08 09:56

developer   ~33730

I had to remove totally the jquery-ui.css. Typically, ranking and date need to be restyled.

LouisGac

LouisGac

2015-12-09 10:51

developer   ~33786

This is the wanted behavior, and the original one of 2.06.
In many cases, bootstrap classes are used to manage the width of inputs (see : http://getbootstrap.com/css/#forms ). It is just not the case for multiple short text. See :
https://github.com/LimeSurvey/LimeSurvey/blob/2.5/application/helpers/qanda_helper.php#l2942

<textarea ... rows="'.$drows.'" cols="'.$tiwidth.'" '.$maxlength.' ...

DenisChenu

DenisChenu

2015-12-09 11:00

developer   ~33788

Here : the width is set in the wrapper , not in the input wrapper only.

<li class="question-item answer-item text-item numberonly maxchars maxchars-2 col-sm-2" id="javatbd282267X7X34SQ01">

<label for="answer282267X7X34SQ01">Some example subquestion with some word to be longer</label>
<span>

<input type="text" maxlength="2" onkeyup="fixnum_checkconditions(this.value, this.name, this.type);" value="" id="answer282267X7X34SQ01" name="282267X7X34SQ01" size="2" class="text empty em_sq_validation good">

&lt;/span>
</li>

You can set col-sm-2 at li span but not in li.

2.06 don't have col-sm-2 ...

DenisChenu

DenisChenu

2015-12-09 11:05

developer   ~33789

You add col-sm-2 to extraclass : but the extraclass is used for the wrapper (label+input)

Not the input .....

https://github.com/LimeSurvey/LimeSurvey/blob/2.5/application/helpers/qanda_helper.php#L2861

ANd please : before say it's the same in 2.05 : please have a look .... and compare

DenisChenu

DenisChenu

2015-12-10 11:07

developer   ~33857

AGain reopened.

Putting col-sm-2 to the li break the system : we don't ask (and don't have actually) a "number of column" in Multiple text.
Here : it's the wifth of the input wrapper.

li class="row"
label class="col-sm-9"
span class="col-sm-2" (wrapper of input)
If you want
Send 2 screen shot

DenisChenu

DenisChenu

2015-12-10 11:10

developer   ~33858

PS : uploaded with no settings.

Here we need row/col-sm-6/col-sm-6.

ANd maybe it's better for all ....

If you have width to 30 : what do you do ?

c_schmitz

c_schmitz

2015-12-10 16:23

administrator   ~33864

Denis, please add screenshots. Easier to show than tell.

DenisChenu

DenisChenu

2015-12-10 16:25

developer   ~33865

You have 3 screen shot .... what else can i do .....

1st : actual solution
2nd : Updated solution : using label class="col-sm-9" and span class="col-sm-2"
3rd : screenshot without set "width" to input.

c_schmitz

c_schmitz

2015-12-10 16:59

administrator   ~33871

In 2.06 it looks like row-sm9-sm2.png - that is alright for me (except for the big blank space between caption and input field)

DenisChenu

DenisChenu

2015-12-10 17:18

developer   ~33873

In 2.06 : it's look more like
row sm6 sm6 for ALL width.
Actually set a width to input for width on label+input. I think it's a bad idea.

Denis

DenisChenu

DenisChenu

2015-12-10 19:24

developer   ~33875

https://github.com/LimeSurvey/LimeSurvey/pull/397

With the screen after the pull

Here : it's inpyt width : not column number (like radio single etc ...)

LouisGac

LouisGac

2015-12-11 11:59

developer   ~33880

Fix committed to 2.5 branch: http://bugs.limesurvey.org/plugin.php?page=Source/view&amp;id=16452

LouisGac

LouisGac

2015-12-11 12:00

developer   ~33881

https://github.com/LimeSurvey/LimeSurvey/commit/02166ea0dc87386bc0d25c5a1955eea96a3381ec

DenisChenu

DenisChenu

2015-12-11 12:23

developer   ~33886

This not really fix it actually ...

See http://250.sondages.pro/index.php/survey/index/sid/957164/newtest/Y/lang/fr

Screenshot with FF42.

With 2.06 : there are no difference on the width on label for input width.

LouisGac

LouisGac

2015-12-11 13:08

developer   ~33894

Last edited: 2015-12-11 13:08

By now :

It calculates the label width on the base of the the label length. So if you have a very long text, it will 12 column, and the input/textarea will be bottom it.

Then, it applies the setting "columns" to the div wrapping the input/textarea (only way to do it in Bootstrap. You can't set 'cols' for textarea).

In reality, what we would need is a new settings : ( label width - input width ) so user can really choose how it looks like.

DenisChenu

DenisChenu

2015-12-11 13:56

developer   ~33895

<q>In reality, what we would need is a new settings : ( label width - input width ) so user can really choose how it looks like.</q>

+1

DenisChenu

DenisChenu

2015-12-15 14:07

developer   ~33954

Ps : with actual sytem : you can have 3 mtiple text in same page ith different wifth for label : think it's better if same width is apply.

LouisGac

LouisGac

2015-12-15 14:08

developer   ~33955

3 mtiple text in same page : do you mean in 3 different questions ? Or in a single question ?

DenisChenu

DenisChenu

2015-12-15 16:32

developer   ~33970

3 different question.

Uploaded the new screenshot. Comparing with this one : https://cloud.githubusercontent.com/assets/1439428/11724290/73124ea0-9f73-11e5-96b7-6706f3bc982d.png

LouisGac

LouisGac

2015-12-15 18:00

developer   ~33981

Yes I agree, looks really better.
I will think about how to reach that goal.

DenisChenu

DenisChenu

2015-12-15 20:23

developer   ~33984

Just add https://github.com/LimeSurvey/LimeSurvey/pull/397

col-6 for label and input wrapper.

If you have time : great to have a new Question attribute/settings

LouisGac

LouisGac

2015-12-16 09:49

developer   ~33991

Yes I think I will do it. This point is important, thank you for insisting.

LouisGac

LouisGac

2016-01-06 18:41

developer   ~34160

Hey Denis,

I've just done a new version of radio_list and multiplechoice questions (I still have to add the new question attribute setting )

Could you please have a look, if you see anything weird ?

DenisChenu

DenisChenu

2016-01-06 19:03

developer   ~34161

Hi,

You don't set default to 6 for "answer part" ?
http://250.sondages.pro/index.php/survey/index/sid/957164/newtest/Y/lang/fr

Before we have 50/50 , actually : 11/12 and 12/12 by default.

Seem strange ....
label have class : control-label col-sm-11
and input are in col-sm-12 div.

I just done a git reset /git pull.

Some caching issue ?

But looking at git diff : again : input with set the label width. We don't have it before.

LouisGac

LouisGac

2016-01-06 19:11

developer   ~34162

oh well : I still didn't changed the multiple text question itself (only the multiple choice and the radio list : the hard ones )

I'll change multiple text tomorrow morning. Should be easy and fast, and the right solution for this one is definitely to give user control.

DenisChenu

DenisChenu

2016-01-07 09:15

developer   ~34164

Hi Louis : with a Multichoice question : http://250.sondages.pro/index.php/926854

Just reset/pull
One column.

Adding row to "question-item answer-item checkbox-item form-group" fix it BUT

  • Less semantic than ul/li : it's a list of choice. in 2.06 it's more semantic
  • I'm unsure we need col-lg-1/col-xs-1 : send a screenshot with row class : a big white space after the input.
DenisChenu

DenisChenu

2016-01-07 09:18

developer   ~34165

Another issue actually : clicking on lable don't check checkbox ....

lable as bad 'for' attribute

LouisGac

LouisGac

2016-01-07 09:55

developer   ~34166

ok thanks.
Should be ok now for multiplechoice question.
I'm going to do mutiple text now.

About the loose of semantic, it's quiet true. In french, around 2005, we was speaking about 'une divite' for people using too much div and div everywhere. CSS framework make the 'divite' the new standard...
http://blog.exirel.me/la-bootstrapite-aigue

Also, we're not trying to position the survey themselves in google results, so it's not a big problem for us.

DenisChenu

DenisChenu

2016-01-07 10:43

developer   ~34167

Last edited: 2016-01-07 10:51

I don't understand the google ??????

Semantic is not for google, i never think of google. Sem&antic help to understand a page for the web browser, any browser, any future browser etc ....

And for semantiv and bootstrap:

ul class='row'
li class='span4'
li class='span4'
li class='span4'
/ul

Work good with just this line:
ul.row {
list-style: inside none none;
}

LouisGac

LouisGac

2016-01-07 10:46

developer   ~34168

span4 is for bootstrap2.
 
Semantic is mostly used for search engine and bots to understand the meaning of the content. What else ?

I've just removed the col-... definition for the label and input to remove the white space.

DenisChenu

DenisChenu

2016-01-07 10:56

developer   ~34169

Screen reader, web phone system, css devlopper ...

And for span4 : you understand me i hope .... replace with col-sm-X

DenisChenu

DenisChenu

2016-01-07 10:57

developer   ~34170

First link in my searx:
Why Care About Semantics

The benefit of writing semantic HTML stems from the goal of a web page—to communicate. And by adding semantic tags to your documents, you are providing additional information about your document, which aids in communication.

http://webdesign.about.com/od/htmltags/a/why-semantic-html.htm

Web is meaning, not something else.

LouisGac

LouisGac

2016-01-07 11:13

developer   ~34171

Last edited: 2016-01-07 11:18

"The benefit of writing semantic HTML stems from the goal of a web page—to communicate. And by adding semantic tags to your documents, you are providing additional information about your document, which aids in communication."

which today means providing infos to search engine, web crawlers, bots...

For CSS today, BEM and OOCSS pattern prior on semantic for organization of the code, see (in french):
http://www.alsacreations.com/article/lire/1641-bonnes-pratiques-en-css-bem-et-oocss.html#oocss
"La sémantique du document n'est donc plus une base de travail, et des classes CSS nommées selon l'apparence sont autorisées à partir du moment où elles sont génériques. En cela, OOCSS est en décalage avec les bonnes pratiques des années 2000. L'ancien nommage par la sémantique[...]"

I've also just added the preview question/group button from editing. That was one of your request, and really needed when testing the render of the questions

DenisChenu

DenisChenu

2016-01-07 12:41

developer   ~34172

The link nyou give speak for css class name , not for semantic using of tag.

Still :

  • ul/li is done for , we have list : use ul/li
  • button is an action : use button class="btn"
  • a "cancel" link is a redirection, but near information than button : a class="btn"

A question : why do you want to use DIV ? Why using div ?

ANd for google:
"Comme par hasard, depuis qu'on a découvert que google aimait les choses bien faites, les webmasters se sont mis à s'intéresser à la Sémantique... pas pour le fond mais pour la forme."

semantic web is substance, not to be google compatible.

And for form : Read tool, reader etc ... https://support.mozilla.org/fr/kb/activer-mode-lecture-firefox-android .
You speak for what you think but not for whole usage on internet and LimeSurvey

LouisGac

LouisGac

2016-01-07 13:01

developer   ~34173

Last edited: 2016-01-07 15:01

Well I speak for what semantic can be use for : crawling html tags as you could query a database. It's really useful in certain conditions (access for search engine, webcrawler, interactions with social networks, etc. ). Spending time on semantic optimization must have a goal (like google positioning), else, it's just a waste of time and money. So : if it really makes problems with screen readers, for sure a complete optimization of survey semantic could be useful (and not only the list, but everything). But I'm quiet sure it just makes no problem, and that we don't need a semantic optimization for now. But in the future : why not....

Here a link giving a good idea about all what should be done to do a semantic optimization of the survey templates :
http://www.w3schools.com/html/html5_semantic_elements.asp

That's a full task.
 
by the way, '< ul >' is one of the poorest semantic HTML tag, just as <div>. It has been improved by semantic tags saying what kind of datas the list contains (like: nav for navigation ).

The link I provided you just say that CSS must not be organized anymore on HTML semantic (like in 2000), but rather on 'appearance' classes (which is the exact contrary of 2000's CSS2 recommendations). So semantic is not so important for css anymore.
 

DenisChenu

DenisChenu

2016-01-08 12:32

developer   ~34186

Last edited: 2016-01-08 12:34

Don't see anything on tag semantic in the link ... only class name semantic .
ANd youn put link for HTML5 semantic : we are in XHTML 1.0 ....

And don't use tagname in css file, but it's not th eproblem here.

<b>Strive to maintain HTML standards and semantics</p>, but not at the expense of practicality. Use the least amount of markup with the fewest intricacies whenever possible.
source http://codeguide.co/#html-practicality

Here : i don't see any reason oif using div.

But close this ... I close my mouth and don't put any remark here ...

c_schmitz

c_schmitz

2016-01-08 15:35

administrator   ~34187

Version 2.5RC6 released

Related Changesets

LimeSurvey: 2.5 02166ea0

2015-12-11 10:58:58

LouisGac

Details Diff
Fixed issue 10080: column system for Multiple short text Affected Issues
10080
mod - application/helpers/qanda_helper.php Diff File

Issue History

Date Modified Username Field Change
2015-12-07 09:17 DenisChenu New Issue
2015-12-07 09:17 DenisChenu File Added: Capture du 2015-12-07 09-15-24.png
2015-12-07 09:53 DenisChenu Additional Information Updated
2015-12-07 21:19 c_schmitz Assigned To => LouisGac
2015-12-07 21:19 c_schmitz Status new => assigned
2015-12-08 09:56 LouisGac Note Added: 33730
2015-12-09 10:51 LouisGac Note Added: 33786
2015-12-09 10:51 LouisGac Status assigned => closed
2015-12-09 10:51 LouisGac Resolution open => fixed
2015-12-09 11:00 DenisChenu Note Added: 33788
2015-12-09 11:00 DenisChenu Status closed => feedback
2015-12-09 11:00 DenisChenu Resolution fixed => reopened
2015-12-09 11:05 DenisChenu Note Added: 33789
2015-12-09 11:05 DenisChenu Status feedback => assigned
2015-12-09 15:48 LouisGac Status assigned => closed
2015-12-09 15:48 LouisGac Resolution reopened => fixed
2015-12-10 11:07 DenisChenu Note Added: 33857
2015-12-10 11:07 DenisChenu Status closed => feedback
2015-12-10 11:07 DenisChenu Resolution fixed => reopened
2015-12-10 11:08 DenisChenu File Added: row-sm9-sm2.png
2015-12-10 11:09 DenisChenu File Added: Capture du 2015-12-10 11-08-56.png
2015-12-10 11:10 DenisChenu Note Added: 33858
2015-12-10 11:10 DenisChenu Status feedback => assigned
2015-12-10 16:23 c_schmitz Note Added: 33864
2015-12-10 16:25 DenisChenu Note Added: 33865
2015-12-10 16:59 c_schmitz Note Added: 33871
2015-12-10 17:18 DenisChenu Note Added: 33873
2015-12-10 19:04 DenisChenu File Added: Test_mult_width_-_2015-12-10_18.54.22.png
2015-12-10 19:05 DenisChenu File Added: limesurvey_survey_multishort-width.lss
2015-12-10 19:24 DenisChenu Note Added: 33875
2015-12-11 11:59 LouisGac Changeset attached => LimeSurvey 2.5 02166ea0
2015-12-11 11:59 LouisGac Note Added: 33880
2015-12-11 12:00 LouisGac Note Added: 33881
2015-12-11 12:00 LouisGac Status assigned => resolved
2015-12-11 12:00 LouisGac Resolution reopened => fixed
2015-12-11 12:23 DenisChenu Note Added: 33886
2015-12-11 12:23 DenisChenu File Added: Test_mult_width_-_2015-12-11_12.22.00.png
2015-12-11 13:08 LouisGac Note Added: 33894
2015-12-11 13:08 LouisGac Note Edited: 33894
2015-12-11 13:56 DenisChenu Note Added: 33895
2015-12-11 14:40 c_schmitz Category Templates => Theme editor
2015-12-15 14:07 DenisChenu Note Added: 33954
2015-12-15 14:08 LouisGac Note Added: 33955
2015-12-15 16:32 DenisChenu Note Added: 33970
2015-12-15 16:32 DenisChenu File Added: Test_mult_width_-_2015-12-15_16.30.46.png
2015-12-15 18:00 LouisGac Note Added: 33981
2015-12-15 20:23 DenisChenu Note Added: 33984
2015-12-16 09:49 LouisGac Note Added: 33991
2016-01-06 18:41 LouisGac Note Added: 34160
2016-01-06 19:03 DenisChenu Note Added: 34161
2016-01-06 19:11 LouisGac Note Added: 34162
2016-01-07 09:15 DenisChenu Note Added: 34164
2016-01-07 09:16 DenisChenu File Added: Capture du 2016-01-07 09-15-51.png
2016-01-07 09:18 DenisChenu Note Added: 34165
2016-01-07 09:55 LouisGac Note Added: 34166
2016-01-07 10:43 DenisChenu Note Added: 34167
2016-01-07 10:46 LouisGac Note Added: 34168
2016-01-07 10:51 DenisChenu Note Edited: 34167
2016-01-07 10:56 DenisChenu Note Added: 34169
2016-01-07 10:57 DenisChenu Note Added: 34170
2016-01-07 11:13 LouisGac Note Added: 34171
2016-01-07 11:18 LouisGac Note Edited: 34171
2016-01-07 12:41 DenisChenu Note Added: 34172
2016-01-07 13:01 LouisGac Note Added: 34173
2016-01-07 15:00 LouisGac Note Edited: 34173
2016-01-07 15:00 LouisGac Note Edited: 34173
2016-01-07 15:00 LouisGac Note Edited: 34173
2016-01-07 15:01 LouisGac Note Edited: 34173
2016-01-08 12:32 DenisChenu Note Added: 34186
2016-01-08 12:34 DenisChenu Note Edited: 34186
2016-01-08 15:35 c_schmitz Note Added: 34187
2016-01-08 15:35 c_schmitz Status resolved => closed