Changing the Question index from dropdown to buttons

Plus d'informations
il y a 1 semaine 1 jour #179035 par krosser
krosser a créé le sujet : Changing the Question index from dropdown to buttons
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.15 hosted on LS servers, not installed locally.

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

Plus d'informations
il y a 1 semaine 1 jour #179046 par DenisChenu
DenisChenu a répondu au sujet : Changing the Question index from dropdown to buttons
???

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 (or search sondages pro).
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 1 semaine 1 jour - il y a 1 semaine 1 jour #179049 par krosser
krosser a répondu au sujet : Changing the Question index from dropdown to buttons
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.15 hosted on LS servers, not installed locally.
Pièces jointes :
Dernière édition: il y a 1 semaine 1 jour par krosser.

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

Plus d'informations
il y a 1 semaine 1 jour - il y a 1 semaine 1 jour #179055 par DenisChenu
DenisChenu a répondu au sujet : Changing the Question index from dropdown to buttons
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 (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .
Dernière édition: il y a 1 semaine 1 jour 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 1 semaine 1 jour #179068 par krosser
krosser a répondu au sujet : Changing the Question index from dropdown to buttons
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.15 hosted on LS servers, not installed locally.

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

Plus d'informations
il y a 1 semaine 1 jour #179076 par DenisChenu
DenisChenu a répondu au sujet : Changing the Question index from dropdown to buttons
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 (or search sondages pro).
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 1 semaine 15 heures - il y a 1 semaine 15 heures #179093 par tpartner
tpartner a répondu au sujet : Changing the Question index from dropdown to buttons
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.
Pièces jointes :
Dernière édition: il y a 1 semaine 15 heures 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 1 semaine 15 heures #179094 par krosser
krosser a répondu au sujet : Changing the Question index from dropdown to buttons

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.15 hosted on LS servers, not installed locally.

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

Plus d'informations
il y a 1 semaine 13 heures - il y a 1 semaine 12 heures #179097 par krosser
krosser a répondu au sujet : Changing the Question index from dropdown to buttons
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.15 hosted on LS servers, not installed locally.
Dernière édition: il y a 1 semaine 12 heures par krosser. Raison: Added padding for separating buttons

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

Plus d'informations
il y a 1 jour 13 heures #179353 par ferdeng
ferdeng a répondu au sujet : Changing the Question index from dropdown to buttons
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 1 jour 13 heures #179354 par krosser
krosser a répondu au sujet : Changing the Question index from dropdown to buttons

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.15 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 1 jour 13 heures #179357 par krosser
krosser a répondu au sujet : Changing the Question index from dropdown to buttons
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.15 hosted on LS servers, not installed locally.

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

Plus d'informations
il y a 1 jour 12 heures #179361 par ferdeng
ferdeng a répondu au sujet : Changing the Question index from dropdown to buttons
Very nice, thank you so much!

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

Plus d'informations
il y a 1 jour 10 heures #179370 par DenisChenu
DenisChenu a répondu au sujet : Changing the Question index from dropdown to buttons

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 (or search sondages pro).
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 1 jour 7 heures #179376 par krosser
krosser a répondu au sujet : Changing the Question index from dropdown to buttons

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.15 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!