View Issue Details

This issue affects 1 person(s).
 8
IDProjectCategoryView StatusLast Update
10306Bug reportsSurvey editingpublic2016-02-23 08:51
Reporternwinter Assigned ToLouisGac 
PrioritynormalSeverityminor 
Status closedResolutionfixed 
Product Version2.50.x 
Summary10306: Default template mangles text for certain widths between "wide" and "narrow"
Description

With array questions (at least) as the screen gets narrower the layout shifts from a single array to each questions separately. For a brief range of width between the two, the layout is mangled. See attached images.

Steps To Reproduce

Take a survey with an array question; slowly narrow the browser window.

TagsNo tags attached.
Attached Files
screenshots.zip (475,951 bytes)
Bug heat8
Complete LimeSurvey version number (& build)160202
I will donate to the project if issue is resolvedNo
BrowserFirefox
Database type & version252
Server OS (if known)CentOS
Webserver software & version (if known)apache 2.4.6
PHP Version5.4.16

Users monitoring this issue

There are no users monitoring this issue.

Activities

LouisGac

LouisGac

2016-02-04 20:02

developer   ~34595

Thank you for reporting bugs, greatly appreciated.

slowly narrowing the windows browser is not a normal behaviour.
Can you confirm that it's not showing correctly in small screens like smarphones ?

nwinter

nwinter

2016-02-04 20:10

reporter   ~34596

Well, it seems to me that the design should work at all window widths -- the problem is not from narrowing the screen per-se, but at certain widths.

But to speak to your question directly, I get the mangled formatting with any width between 768-800 pixels (inclusive), which includes many tablets in portrait mode.

LouisGac

LouisGac

2016-02-05 09:55

developer   ~34615

Yes, the design should work with any windows size. But narrowing the windows is not a normal way to pass a survey ;-)
 
whatever : I'll correct it.

DenisChenu

DenisChenu

2016-02-05 10:16

developer   ~34618

For SkeletonQuest : i have 4 method

  • Use table-responsive system from bootstrap : table stay like it, overflow Y
  • Use table width : 100% : great with array 5 point
  • Use table width 100%; add the thead, show the label for cell : Show like a "button line" : really great with 5 point, great bwith 10 point on a lot of phone, great with 3/4 answers with one or 2 words (for exemple : YES/NO array)
  • Use block display for each line like Actual default

Maybe offer different system ? For survey + questions in survey.

Actually can use attribute class easily

LouisGac

LouisGac

2016-02-05 10:37

developer   ~34620

Last edited: 2016-02-05 10:55

Well, the problem of responsive table is one of the best known and studied problems of the last years. There is no perfect solution, but the "no-more-table" solution I'm using here is the most standard and accepted one :

http://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table
https://css-tricks.com/responsive-data-tables/

It makes a problem with very long labels, but should be easy to correct with some js or CSS.

Whatever : there is no perfect solution for responsiveness of table. Survey makers who want responsiveness should totally avoid to use tables. There is no need for it : a table is just a concatenation of single questions (like radio list or other). They use it by habit, it comes from the old way of doing printed surveys.

Of course, the survey maker not being specialists and not understanding the technical problems will make a lot of resistance to it. But like it always happen in those cases (print VS screen), the will finally submit to technological progress and its new logic. For example, the graphical designers coming from the print technology used tables everywhere at the beginning (CSS1), then started to accept more fluid layout (CSS2), and then finally submitted to grid logic (CSS3), and abandoned pixel definition for em, rem and %.

There is also more problems with question tables : it's not so efficient for big datas approach, but that another problem.

I bet 100€ that in 10 years, nobody will use anymore arrays for surveys.

c_schmitz

c_schmitz

2016-02-23 08:51

administrator   ~35573

Version 2.50+ Build 160222 released

Issue History

Date Modified Username Field Change
2016-02-04 17:38 nwinter New Issue
2016-02-04 17:38 nwinter File Added: screenshots.zip
2016-02-04 20:02 LouisGac Note Added: 34595
2016-02-04 20:02 LouisGac Assigned To => LouisGac
2016-02-04 20:02 LouisGac Status new => feedback
2016-02-04 20:10 nwinter Note Added: 34596
2016-02-04 20:10 nwinter Status feedback => assigned
2016-02-05 09:55 LouisGac Note Added: 34615
2016-02-05 10:16 DenisChenu Note Added: 34618
2016-02-05 10:37 LouisGac Note Added: 34620
2016-02-05 10:39 LouisGac Note Edited: 34620
2016-02-05 10:40 LouisGac Note Edited: 34620
2016-02-05 10:55 LouisGac Note Edited: 34620
2016-02-22 09:54 LouisGac Status assigned => resolved
2016-02-22 09:54 LouisGac Resolution open => fixed
2016-02-23 08:51 c_schmitz Note Added: 35573
2016-02-23 08:51 c_schmitz Status resolved => closed
2019-11-01 17:25 c_schmitz Category Survey design => Survey editing