Mobile Site 1.0 - Display of multi slider table question (Support #3742)


Added by Shlomi Lanton over 1 year ago. Updated over 1 year ago.


Status:Closed Start date:
Priority:High Due Date::
Assignee:Nadav Avidan % Done:

0%

Category:- Spent time: -
Target version:-

Description

There is no synchronisation between the labels that are displayed in the top of the question and the values when the user moves the slider.

I have added a screenshot, that in it you can see that I have set the value to "8" but actually it’s displayed between the label "8" and the label "9".

Note: I remember that we said that for iPhones we will use up to 7 categories, but this question should be displayed in the iPad and there is enough space even for 10 categories.

how to see it:
1. Go to: http://m.scout.co.il/index.php?web&db=multi_slider_table&lng=3&qa
2. Press the "Start Survey" button
3. Set the slider to "7" or "8".


Screen_Shot_2012-12-07_at_12.19.36_.png (83.4 kB) Shlomi Lanton, 12/07/2012 12:34 pm

IMG_1204.PNG (31.1 kB) Shlomi Lanton, 12/15/2012 11:11 am

Multi_Silders_Example.png (144.6 kB) Shlomi Lanton, 12/30/2012 05:06 pm

IMG_0145.PNG - iPhone_After (75 kB) Shlomi Lanton, 01/06/2013 11:36 am

IMG_0144.PNG - iPhone_Before (74.3 kB) Shlomi Lanton, 01/06/2013 11:36 am

IMG_0166.PNG - iPad_Before (42.3 kB) Shlomi Lanton, 01/06/2013 11:36 am

IMG_0167.PNG - iPad_After (42.2 kB) Shlomi Lanton, 01/06/2013 11:36 am

Multi_Slider_table_value_cut_off.PNG (154.1 kB) Shlomi Lanton, 01/06/2013 05:55 pm

Multi_Slider_table_iPhone.PNG (74.3 kB) Shlomi Lanton, 01/06/2013 05:55 pm


History

Updated by Nadav Avidan over 1 year ago

Fixed BUT, when having to many values in the table e.g. 1-10 there is simply not enough room for the table to render well - it will not be an exact match and there will be a slight offset between the slider and the above values.
Also when the text labels on the side are too long, there might be display issues.
therefor try to keep the values from 1-6 or 7 for good iphone rendering (if you target other devices that have larger screens you can enter more)

Updated by Nadav Avidan over 1 year ago

  • Status changed from Assigned to Resolved

Updated by Shlomi Lanton over 1 year ago

Not good at all.

I have added a screen-soht, init you can see that there are 3 issues now:
1. The first slider hides some of the text of the first sub-question.
2. When I set the slider to "7", some of it is placed outside the screen.
3. The original issue still exists, look at the first slider where I set the value "1", and see that it’s not under the "1" label, but it’s between the "1" label and the "2" label.

All data is form:
http://m.scout.co.il/index.php?web&db=multi_slider_table&lng=3&qa

  • Status changed from Resolved to Feedback
  • File IMG_1204.PNG added

Updated by Nadav Avidan over 1 year ago

I fixed 2, where some of it is placed outside the screen.

As I mentioned before, iphone screens are small. 7 values are too much for them. same goes for labels.
We allow 20% of the width for the label, and 70% for the slider. the other 10% goes for padding.
if we increase 20% to 30% you will be able to add maximum 5 values on ipnones - and even that might look bad.

the recommended values number is maximum 5 and the labels must be one or more sort words separated with spaces.

Lets put some more reasonable values and labels and see how it behaves.
My guess is that this extreme 7 values and long labels cause visual problems.

Updated by Nadav Avidan over 1 year ago

  • Assignee changed from Nadav Avidan to Shlomi Lanton

Updated by Shlomi Lanton over 1 year ago

We need to be able to allow more long texts, for now even with small texts that display is not good.

Is it possible to change the display so it will be like in the "Multi Sliders" question.
Meaning that instead of displaying the sub-question text next to the slider, the sub question text will be displayed above the slider.

I have added a screen -shot, in it you can see this display in the "Multi Sliders" question.

Updated by Nadav Avidan over 1 year ago

Changed to the new structure.
Please make sure that the answers register in the database correctly.

All available on production under /Pending folder

  • Assignee changed from Nadav Avidan to Idan Geva
  • Status changed from Feedback to Resolved

Updated by Shlomi Lanton over 1 year ago

there are some issues with the display now:
1. Sub-Question text in displayed in the middle, but the buttons are align to the left of the screen.
I have added 4 images, 2 of them show the display when the question first loaded (those file named: "...._Before".
After I press the refresh button you can see that on the iPad (image name: "iPad_After") the Sub-Question text is also align to the left, and that is not good because all items are supposed to be align to the center.
Also you can see that in the iPhone (image name: "iPhone_After") the text is also align to the left and that is not good.
And also you can see that the display is cut-off and that is also not good.

2. Add one more space in order to separate between the sub-questions.

Updated by Shlomi Lanton over 1 year ago

1. Done

2. Still open

New Issues:

3. Display of selected answer - After I select an answer it’s looks like it’s cut of a little bit, you can see it in the "Multi Slider table value cut off.PNG" file, I have marked this issue with a blue square.

4. When viewing on the iPhone I see like another black object in the end of each answers row, you can see it in the "Multi Slider table iPhone.PNG" file, also marked with a blue square

Updated by Nadav Avidan over 1 year ago

All remaining 2,3 and 4 fixed.
Pending/

  • Assignee changed from Nadav Avidan to Shlomi Lanton
  • Status changed from Feedback to Resolved

Updated by Shlomi Lanton over 1 year ago

Done, move to Production please

  • Assignee changed from Shlomi Lanton to Nadav Avidan
  • Status changed from Resolved to Feedback

Updated by Nadav Avidan over 1 year ago

uploaded to m.scout & ipanel

  • Status changed from Feedback to Resolved

Updated by Shlomi Lanton over 1 year ago

  • Status changed from Resolved to Closed

Also available in: Atom PDF