New template based on Bootstrap

More
3 years 4 months ago - 3 years 4 months ago #114933 by smail
smail replied the topic: New template based on Bootstrap
Regarding responsive design, what I disliked so far is the behavior of answer tables. On smaller devices (viewports) the tables are often bigger than the viewport, which is not very usable and looks ugly.



Recently I discoverd an intersting solution for this problem:
bootsnipp.com/snippets/featured/no-more-...es-respsonsive-table


So I tried to implement this in into the basic bootstrap template, the result you can see here:



The needed css and js files are here (just insert into the head):

File Attachment:

File Name: no-more-tables.zip
File Size:1 KB


Tested only in FF, on Iphone and Samsung Galaxy.
Mabye this is useful for anyone or can be implemented in future versions of the template.
Attachments:
Last Edit: 3 years 4 months ago by smail.
The following user(s) said Thank You: tammo

Please Log in or Create an account to join the conversation.

More
3 years 4 months ago #114935 by Mazi
Mazi replied the topic: New template based on Bootstrap
Wow, that's a really great solution. Tables have always caused problems because of the limited width on smaller devices. This is a pretty good fix!


Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)survey-consulting.com'"

Please Log in or Create an account to join the conversation.

More
3 years 4 months ago #114945 by artesea
artesea replied the topic: New template based on Bootstrap
The no-more-tables is good, but I've already added one line to the css file (just before the final bracket)
.no-more-tables th.answertext { width: 100%; }
This stops (at least for the test I ran) the answertext being set to 20%.

Please Log in or Create an account to join the conversation.

More
3 years 1 month ago #117732 by misterdot
misterdot replied the topic: New template based on Bootstrap
Thanks, Tammo - this template is great! I'm currently using it with the no-more-tables solution (thanks, smail!) and most things work, but I can't seem to get the exclusive option to work with multiple choice questions. It ignores that option. Have you seen this behavior? Also, are there any other question types that you know of that do or don't work? I've attached a sample survey.
Attachments:

Please Log in or Create an account to join the conversation.

More
3 years 1 month ago #117734 by tammo
tammo replied the topic: New template based on Bootstrap
Hi misterdot,

we know that multiple choice does not work well. We are working on a solution, will probably be available for dowload next week.

We are working now on a free template and a template with some more functionality which will be sold.

Stay tuned...

Have a great weekend!

Tammo ter Hark


Tammo ter Hark at Tools for Research
Proud developers of the TFR Responsive Limesurvey template
toolsforresearch.com/limesurvey-responsive-template
The following user(s) said Thank You: misterdot

Please Log in or Create an account to join the conversation.

More
3 years 1 month ago #117737 by Mazi
Mazi replied the topic: New template based on Bootstrap

misterdot wrote: Thanks, Tammo - this template is great! I'm currently using it with the no-more-tables solution (thanks, smail!) and most things work, but I can't seem to get the exclusive option to work with multiple choice questions. It ignores that option. Have you seen this behavior? Also, are there any other question types that you know of that do or don't work? I've attached a sample survey.

@misterdot, are you sure it really doesn't work or maybe it just doesn't display correctly but still disables items at the background?

Do you see any JavaScript errors?

Did you check results when using this feature? E.g.
- first select option 1 at a multiple choice question
- click next (that already writes the results to the DB)
- check results if option 1 was saved
- go back and click the exclusive option
- click next
- check results again

Maybe it removes the previously saved option 1 from the results?!


Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)survey-consulting.com'"

Please Log in or Create an account to join the conversation.

More
3 years 1 month ago #117742 by misterdot
misterdot replied the topic: New template based on Bootstrap
Mazi,
You are correct - if I test as you describe, it writes the correct value to the DB, but the display doesn't disable the other choices.

If I select the exclusive option (value=5) and another option (value=1), it writes 5 to the DB. When I go back, the exclusive option is the only one that displays until I uncheck it, then the other choices come back. Selecting non-exclusive options works as expected.

So yes, it seems to just be a JavaScript issue. I don't see any errors on the console (inspect element in Chrome).
Thanks!

Please Log in or Create an account to join the conversation.

More
3 years 1 month ago #117743 by Mazi
Mazi replied the topic: New template based on Bootstrap
My assumption is that this isn't a JS issue but a display issue. The JS seems to disable the other elements correctly, it just doesn't adjust the GUI accordingly.


Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)survey-consulting.com'"

Please Log in or Create an account to join the conversation.

More
2 years 11 months ago #119698 by tammo
tammo replied the topic: New template based on Bootstrap
The exclusive option has been solved now, among many other additions.

The free version has been released, the Premium version will be released early in may!

Stay tuned!

More about the template: toolsforresearch.com/limesurvey-responsive-template

Greetings from Holland,

Tammo ter Hark


Tammo ter Hark at Tools for Research
Proud developers of the TFR Responsive Limesurvey template
toolsforresearch.com/limesurvey-responsive-template
The following user(s) said Thank You: Ben_V

Please Log in or Create an account to join the conversation.

More
2 years 11 months ago #119710 by jelo
jelo replied the topic: New template based on Bootstrap
Looks great. Thanks for allowing to test your theme. And for the hard work which was done by both of you.

Bugreport (I used your Demo):
"M1 14 Do you know at what date & time you were born?"

When using the date/time question the year is not transferred from the javascript date/time picker. "Y" is pasted into the field instead of 2015.

The picker is displayed when clicking into the field. It is not possible to enter the date/time via the keyboard. The date/time-picker is overlaying that area. Is that an intended behavior. Personal I like to be able to use both ways. Picker via Button at the side or entering via keyboard.


Not sure if missing IE8 support (with the developer hat on I wouldn't support IE8 too) is hurting usage in certain scenarios. Anyone with real life examples where IE8 was crucial for a project? WindowsXP was the OS with IE8 as a last release. The Windows OS flavors under active support are on IE11.

Please Log in or Create an account to join the conversation.

More
2 years 11 months ago #119712 by tammo
tammo replied the topic: New template based on Bootstrap
Oops, my mistake, this was a wrong setting in the advanced settings of the date question. I corrected this.

In my browser I can enter the date now. Could you try again and see if it works now?

if not, what browser are you using? We will on it then.

And yes: we will not support IE8, this is ancient. In previous projects supporting IE8 cost us about 20-25% of development time and we cannot afford to spend that time on a declining browser. But if anyone want to support us in doing so, we will.


Tammo ter Hark at Tools for Research
Proud developers of the TFR Responsive Limesurvey template
toolsforresearch.com/limesurvey-responsive-template

Please Log in or Create an account to join the conversation.

More
2 years 11 months ago #119719 by jelo
jelo replied the topic: New template based on Bootstrap

tammo wrote: In my browser I can enter the date now. Could you try again and see if it works now?

The year is now transferred into the field.

But the picker is still shown when the field is clicked. A entering by keyboard is not possible. Which might relates to available screen estate. I always test browsing in virtual machines with different screen resolutions.

In this screenshot the browser window is 1092px x 856px and the viewport is 1084px x 679px.


Is that intended behavior (datetime-picker as the only input method to ensure correct format)?
Attachments:

Please Log in or Create an account to join the conversation.

More
2 years 11 months ago #119728 by tammo
tammo replied the topic: New template based on Bootstrap
OK, thanks. I've put it on our internal issue list.

Maybe this (large) date time picker is not a good candidate for larger screens. But we will see what we can do.


Tammo ter Hark at Tools for Research
Proud developers of the TFR Responsive Limesurvey template
toolsforresearch.com/limesurvey-responsive-template

Please Log in or Create an account to join the conversation.

More
2 years 11 months ago - 2 years 11 months ago #119898 by tammo
tammo replied the topic: New template based on Bootstrap
As it turns out, the date/time picker now is styled in a combination of standard jQuery (calendar) together with some of our styling elements (sliders). Because we want users to be able to fill in on tablets/mobile phones, the sliders must be a little larger than normally in jQuery. This results in a larger layout for the complete date/time picker.

For use on mobile phones we advise to split the question in 2: a date question separate from a time question.

We have implemented this in a new version of our test survey, to be found at:
survey.toolsforresearch.com/index.php/123456/lang-en


Tammo ter Hark at Tools for Research
Proud developers of the TFR Responsive Limesurvey template
toolsforresearch.com/limesurvey-responsive-template
Last Edit: 2 years 11 months ago by tammo.

Please Log in or Create an account to join the conversation.

More
2 years 11 months ago #119942 by jelo
jelo replied the topic: New template based on Bootstrap

tammo wrote: Because we want users to be able to fill in on tablets/mobile phones, the sliders must be a little larger than normally in jQuery. This results in a larger layout for the complete date/time picker.

The silder size feels more like looking through an "ease of use" magnifer. I am not totally convinced of mobile first with surveys. These silders size looks "strange" with a desktop browser setup.

I cannot remember using a date/time-picker in a survey, so I will stop commenting on that picker.I am sure you will have a lot more "little" bugs on you todo-list.

I would like to see the gpl version bundled with Limesurvey to ensure better debugging. Not sure if a referral-program for the commercial template can bring the limesurvey project a few bucks too if they bundle it. Just louding thinking from a user.

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!