Changing the Question index from dropdown to buttons

Plus d'informations
il y a 5 mois 1 semaine #179035 par 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.

Connexion ou Créer un compte pour participer à la conversation.

LimeSurvey Partners
Plus d'informations
il y a 5 mois 1 semaine #179046 par 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 .
An error happen ? Before make a new topic : remind the Debug mode .

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 5 mois 1 semaine - il y a 5 mois 1 semaine #179049 par 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.
Pièces jointes :
Dernière édition: il y a 5 mois 1 semaine par krosser.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 5 mois 1 semaine - il y a 5 mois 1 semaine #179055 par 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 .
An error happen ? Before make a new topic : remind the Debug mode .
Dernière édition: il y a 5 mois 1 semaine par DenisChenu.
Les utilisateur(s) suivant ont remercié: LouisGac

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 5 mois 1 semaine #179068 par 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.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 5 mois 6 jours #179076 par 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 .
An error happen ? Before make a new topic : remind the Debug mode .

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 5 mois 6 jours - il y a 5 mois 6 jours #179093 par 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
Pièces jointes :
Dernière édition: il y a 5 mois 6 jours par tpartner.
Les utilisateur(s) suivant ont remercié: krosser, ferdeng

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 5 mois 6 jours #179094 par krosser

DenisChenu écrit: 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.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 5 mois 6 jours - il y a 5 mois 6 jours #179097 par 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.
Dernière édition: il y a 5 mois 6 jours par krosser. Raison: Added padding for separating buttons

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 5 mois 7 heures #179353 par 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?

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 5 mois 6 heures #179354 par krosser

ferdeng écrit: 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.
Les utilisateur(s) suivant ont remercié: ferdeng

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 5 mois 6 heures #179357 par 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.

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 5 mois 5 heures #179361 par ferdeng
Very nice, thank you so much!

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 5 mois 4 heures #179370 par DenisChenu

krosser écrit: 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 .
An error happen ? Before make a new topic : remind the Debug mode .

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 5 mois 44 minutes #179376 par krosser

DenisChenu écrit:

krosser écrit: 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.

Connexion ou Créer un compte pour participer à la conversation.

Commencez dès maintenant !

Créez simplement un compte et commencez à utiliser LimeSurvey dès aujourd'hui.

Inscrivez-vous maintenant

Inscrivez-vous à notre Newsletter!