Changing the Question index from dropdown to buttons

More
8 months 1 week ago #179035 by krosser
Hi Guys!

I am trying to change the Question index from a default dropdown menu into buttons, reposition it below the nav bar (e.g., into the header) and place buttons horizontally.

I have found these files here:
Navigation
Unfortunately, I couldn't find any instructions on how to use those extra twig files.

So, what I tied to do is to add the same code from nav_bar.twig to custom_header.twig to test it out.
<div id="{{ aSurveyInfo.id.navbar }}" class="{{ aSurveyInfo.class.navbarcollapse }}" {{ aSurveyInfo.attr.navbarcollapse }} >
        <ul class="{{ aSurveyInfo.class.navbarlink }} navbar-right" {{ aSurveyInfo.attr.navbarlink }}>
 
           {{ include('./subviews/navigation/question_index_buttons.twig') }}
 
        </ul>
   </div>

The Index switches to buttons but the buttons are unresponsive - I cannot switch between question groups.
Can someone help with what needs to be done in order to change the Index from dropdown to buttons properly?
Also, does it matter if the LimeSurvey is either installed on your server and you have access to its internal files or if it's hosted by LS team?

LS version is the latest 3.15

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.

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

LimeSurvey Partners
More
8 months 1 week ago #179046 by DenisChenu
???

If you want buton : it must be inside the form ,

Just see github.com/LimeSurvey/LimeSurvey/blob/7d...r_complement.twig#L7

Else : if you xant to show link as btn : try here
github.com/LimeSurvey/LimeSurvey/blob/7d..._index_menu.twig#L55
to had btn btn-default to the link

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
An error happen ? Before make a new topic : remind the Debug mode .

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

More
8 months 1 week ago - 8 months 1 week ago #179049 by krosser
Okay, so when I added the following code into the custom_header.twig, the buttons are not responsive, like in my first post.
<div class="row ">
        <!-- Extra button container -->
        <div class="col-xs-6 clearall-saveall-wrapper">
            {% if aSurveyInfo.aNavigator.load.show == "Y" or aSurveyInfo.aNavigator.save.show == "Y" %}
                {{ include('./subviews/navigation/save_buttons.twig') }}
            {% endif %}
            {% if aSurveyInfo.bShowClearAll == true %}
                {{ include('./subviews/navigation/clearall_buttons.twig') }}
            {% endif %}
        </div>
         <!-- Index container -->
        {% if (aSurveyInfo.aQuestionIndex.bShow == true) %}
            {{ include('./subviews/navigation/question_index_buttons.twig') }}
        {% endif %}
    </div>

When I added the code with the first "if" line, the elements didn't show up at all (even though I deleted "ls-js-hidden").


I don't want to show the link as a button, but thanks for the extra hint.
This is what I need...

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.
Attachments:
Last edit: 8 months 1 week ago by krosser.

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

More
8 months 1 week ago - 8 months 1 week ago #179055 by DenisChenu
To have what you need : you need to construct the twig part of question_index_buttons.twig on you way.

You can use getbootstrap.com/docs/3.3/components/#btn-groups for example.

And the default is reponsive … BUT : custom_header add element in head of page : out of body.

I don't make this on forum, if you need : support.sondages.pro/

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
An error happen ? Before make a new topic : remind the Debug mode .
Last edit: 8 months 1 week ago by DenisChenu.
The following user(s) said Thank You: LouisGac

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

More
8 months 1 week ago #179068 by krosser
If you mean the dropdown as "default", then yes, but the buttons aren't no matter where I put the code, even in the nav_bar.twig itself.

I guess that is why there is no explanation for the buttons use anywhere... Sadly.
It is not even clear whether you have to have the LS to be installed locally for it to work or not.

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.

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

More
8 months 1 week ago #179076 by DenisChenu
See sample : master.sondages.pro/899541

DON'T PUT IT IN nav_bar a nav bar is a nav bar not a getbootstrap.com/docs/3.3/components/#list-group item …
WHY you want to put it in nav_bar ????

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
An error happen ? Before make a new topic : remind the Debug mode .

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

More
8 months 1 week ago - 8 months 1 week ago #179093 by tpartner
As Denis suggests, you can move the existing links and style them to look like buttons.

1) Remove or comment this out in nav_bar.twig:

{{ include('./subviews/navigation/question_index_menu.twig') }}


2) In question_index_menu.twig, modify the format == 'G' block so it looks something like this (you may want to tweak it more for screen-size responsiveness):

	{% if aSurveyInfo.format == 'G' %}
		<!-- Question index, group, {{ aSurveyInfo.aQuestionIndex.type }} -->
 
		<ul class="{{ aSurveyInfo.class.indexmenusgul }}" {{ aSurveyInfo.attr.indexmenusgul }}>
			{# TODO: move back this logic to SurveyRuntime, and provide a ready to use indexItem.statusClass #}
			{% for step, indexItem in aSurveyInfo.aQuestionIndex.items %}
				{% set statusClass = ''  %}
 
				{% if attribute(indexItem.stepStatus, 'index-item-unanswered') is defined and attribute(indexItem.stepStatus, 'index-item-unanswered') == true  %}
					{% set statusClass = statusClass ~ ' bg-warning'  %}
				{% endif %}
 
				{% if attribute(indexItem.stepStatus, 'index-item-error') is defined and attribute(indexItem.stepStatus, 'index-item-error') == true   %}
					{% set statusClass = statusClass ~ ' bg-danger'  %}
				{% endif %}
 
				{% if attribute(indexItem.stepStatus, 'index-item-current') is defined and attribute(indexItem.stepStatus, 'index-item-current') == true %}
					{% set statusClass = statusClass ~  ' disabled'  %}
				{% endif %}
 
 
				<li class="{{ indexItem.coreClass }} {{ statusClass }}"  {{ aSurveyInfo.attr.indexmenusgli }}>
					<a href='{{ indexItem.url }}' data-limesurvey-submit='{{ indexItem.submit }}' class='aminate btn btn-lg btn-primary'>
						{{ indexItem.text }}
					</a>
				</li>
			{% endfor %}
		</ul>
	{% endif %}


3) In layout_global.twig, after the nav_bar block, add something like this:

                <div class="custom-index-wrapper">
                    {{ include('./subviews/navigation/question_index_menu.twig') }}
                </div>


4) Add something like this to the end of custom.css (you may want to tweak it more for screen-size responsiveness):

.custom-index-wrapper {
	margin: 20px 0;
}
 
.custom-index-wrapper ul {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
 
.custom-index-wrapper li {
	display: inline-block;
	margin: 0 5px;
}
 
.custom-index-wrapper li.index-item-current {
	opacity:0.65;
	filter:alpha(opacity=65);
}
 
.custom-index-wrapper li a {
	min-width: 80px;
}
 
.custom-index-wrapper li.index-item-current a {
	cursor: default;
}


Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Official LimeSurvey Partner - partnersurveys.com
Attachments:
Last edit: 8 months 1 week ago by tpartner.
The following user(s) said Thank You: krosser, ferdeng

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

More
8 months 1 week ago #179094 by krosser

DenisChenu wrote: See sample : master.sondages.pro/899541

DON'T PUT IT IN nav_bar a nav bar is a nav bar not a getbootstrap.com/docs/3.3/components/#list-group item …
WHY you want to put it in nav_bar ????


Yes, man. :) I only put the code inside the nav bar for testing. I tried different twig files to see whether it affects the responsiveness of buttons. The layout_global.twig would be a good place to put it.

Thanks for the example. Did you put the code from navigator_complement.twig without changing it?
I don't understand why it is not responsive for me.

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.

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

More
8 months 1 week ago - 8 months 1 week ago #179097 by krosser
Great, Tony! Many thanks!

As there is no access to question_index_menu.twig in themes, when you use the LS hosted by them, I had to add the modified G block directly into layout_global.twig, in a div. Then styled it in custom.css.
But I have 18 groups/buttons, which is quite a few, and it makes it look too crammed, when there is no space between buttons. Can you please suggest the correct parameter for increasing the gaps?

Edit: okay, I've added padding to
.custom-index-wrapper li {
	display: inline-block;
	margin: 0 5px;
	padding: 5px;
}

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.
Last edit: 8 months 1 week ago by krosser. Reason: Added padding for separating buttons

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

More
8 months 4 days ago #179353 by ferdeng
Hey guys,
Tony's solution works great, thank you very much!
However, I have a ton of questions (over 50) and the buttons are pretty big. Is there a way to make the buttons smaller? Or to have a scrollable bar?

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

More
8 months 4 days ago #179354 by krosser

ferdeng wrote: Hey guys,
Tony's solution works great, thank you very much!
However, I have a ton of questions (over 50) and the buttons are pretty big. Is there a way to make the buttons smaller? Or to have a scrollable bar?


Yes, to make the buttons smaller, just change the class from btn-lg to either btn-md, or btn-sm, or btn-xs.

Here is the description on button sizes in Bootstrap 3.

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.
The following user(s) said Thank You: ferdeng

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

More
8 months 4 days ago #179357 by krosser
BTW guys, I have figured out why the code from question_index_groups_buttons.twig was not working - buttons were not responsive. The original code was missing the href part from the url question_index_menu.twig.

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.

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

More
8 months 4 days ago #179361 by ferdeng
Very nice, thank you so much!

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

More
8 months 4 days ago #179370 by DenisChenu

krosser wrote: BTW guys, I have figured out why the code from question_index_groups_buttons.twig was not working - buttons were not responsive. The original code was missing the href part from the url question_index_menu.twig.

You kidding ?

question_index_groups_buttons do BUTTON not LINK

And it work and was responsive …

Don't say silly things please

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
An error happen ? Before make a new topic : remind the Debug mode .

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

More
8 months 4 days ago #179376 by krosser

DenisChenu wrote:

krosser wrote: BTW guys, I have figured out why the code from question_index_groups_buttons.twig was not working - buttons were not responsive. The original code was missing the href part from the url question_index_menu.twig.

You kidding ?

question_index_groups_buttons do BUTTON not LINK

And it work and was responsive …

Don't say silly things please


Well, try to copy/paste the code from question_index_groups_buttons.twig into layout_global.twig and see if it is responsive.
<div class="list-group index-button-full">
  <div class="list-group-item">
      <div class="h4 list-group-item-heading">{{ gT("Question index") }}</div>
  </div>
  {% for step, indexItem in aSurveyInfo.aQuestionIndex.items %}
    {% set templateClass = ''  %}
    {% if attribute(indexItem.stepStatus, 'index-item-unanswered') is defined and attribute(indexItem.stepStatus, 'index-item-unanswered') == true  %}
        {% set templateClass = templateClass ~ ' list-group-item-warning'  %}
    {% endif %}
    {% if attribute(indexItem.stepStatus, 'index-item-error') is defined and attribute(indexItem.stepStatus, 'index-item-error') == true   %}
        {% set templateClass = templateClass ~ ' list-group-item-danger'  %}
    {% endif %}
    {% if attribute(indexItem.stepStatus, 'index-item-current') is defined and attribute(indexItem.stepStatus, 'index-item-current') == true %}
        {% set templateClass = statusClass ~  ' disabled'  %}
    {% endif %}
    <button type="submit" name="move" value="{{ indexItem.step }}" class="list-group-item {{ indexItem.coreClass }} {{ templateClass }}" >{{ indexItem.text }}</button>
  {% endfor %}
</div>

I'm using the latest LS 3.17 hosted on LS servers, not installed locally.

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!