Adjusting the color per row and window of boostrap buttons (list, radio)?

Plus d'informations
il y a 5 mois 1 semaine #183968 par sabinevansleeuwen
Hi,

I am trying to create a radio list with bootstrap buttons of 56 categories, divided over 7 columns (for each day of the week) and 8 rows (for each 3-hour time slot). However, as seen in the print screen below, I can only get 6 answer options in one row, so my 'Sundays' are cutted off and displayed on the next row, and so on that my 7*8 matrix is not working this way...

I am using version 3.17.3+190429, but I have seen opties in previous versions where you could manually tell LimeSurvey how many columns or rows you would like to include? How can I use this option for the optimal design of my 7*8 matrix?

Thanks in advance for year reaction!
Pièces jointes :

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

LimeSurvey Partners
Plus d'informations
il y a 5 mois 1 semaine #183969 par tpartner
You cannot use the manual columns setting with Bootstrap buttons. The Bootstrap grid is restricted to divisors of twelve.

A workaround would be to assign a question CSS class "columns-7", extend your theme and add something like this to the end of your custom.css file:

@media only screen and (min-width: 768px) {
 
	.columns-7 .bootstrap-buttons-div.col-sm-2 {
		width: 14.2857%;
	}
}


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 :

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

Plus d'informations
il y a 5 mois 1 semaine #183970 par tpartner
...or, for less wasted white-space:

@media only screen and (min-width: 768px) {
 
	.columns-7 .bootstrap-buttons-div.col-sm-2 {
		width: 14.2857%;
		padding-right: 3px;
		padding-left: 3px;
	}
}


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

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

Plus d'informations
il y a 5 mois 1 semaine #183985 par sabinevansleeuwen
Dear Tony Partner,

Thanks to your helpful feedback, I extended my theme and assigned a question CSS class "columns-8". I now have a radio list with bootstrap buttons of 56 categories, divided over 8 colomns (for each 3-hour time slot) and 7 rows (for each day of the week) - perfect!!

However, I have got 2 additional questions on this topic that I tried to ask in another conversation ( www.limesurvey.org/forum/design-issues/1...w-list,-radio#183980 ), but for some reason it got closed (?)

Therefore, I will state my original questions again below, and I hope you can help me with these one as well?


(Q1) As each row in my 7*8 matrix represents a different day of the week, I was wondering whether it is possible to give each row a different colour (e.g. from dark to light) and if so, how can I adjust this?

(Q2) In addition, I was wondering in which way I can change the window of the overall bootstrap question so that the buttons are not for the full 100% spread out of each row, but for example for only 50% or 75% with some white area to the right (as shown in the print screen below)?


Thanks in advance for year reaction!
Pièces jointes :

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

Plus d'informations
il y a 5 mois 1 semaine #183986 par tpartner
Q1

1) Add this script to the question source to assign "row" classes:

<script type="text/javascript" charset="utf-8">
 
	$(document).on('ready pjax:scriptcomplete',function(){
 
		// Identify this question
		var thisQuestion = $('#question{QID}');
 
		// "Row" classes
		$('.bootstrap-buttons-div', thisQuestion).each(function(i) {
			$(this).addClass('row-'+Math.ceil((i+1)/8));
		});
	});
</script>

2)Add something like this to custom.css:

.columns-8 .bootstrap-buttons-div .btn-primary {
	border-color: #2D7831; 
	background-color: #328637; 
}
 
.columns-8 .bootstrap-buttons-div.row-2 .btn-primary { background-color: #37943D; }
 
.columns-8 .bootstrap-buttons-div.row-3 .btn-primary { background-color: #3DA343; }
 
.columns-8 .bootstrap-buttons-div.row-4 .btn-primary { background-color: #42B149; }
 
.columns-8 .bootstrap-buttons-div.row-5 .btn-primary { background-color: #4BBC51; }
 
.columns-8 .bootstrap-buttons-div.row-6 .btn-primary { background-color: #59C15F; }
 
.columns-8 .bootstrap-buttons-div.row-7 .btn-primary { background-color: #67D66C; }
 
.columns-8 .bootstrap-buttons-div .btn-primary:hover {
	border-color: #2D7831; 
	background-color: #2D7831; 
}
 
.columns-8 .bootstrap-buttons-div .btn-primary:active,
.columns-8 .bootstrap-buttons-div .btn-primary.active {
	border-color: #1D4D20; 
	background-color: #1D4D20; 
}

Q2

Add something like this to custom.css:

.columns-8 .answer-container {
	max-width: 500px;
}


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 :

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 #183990 par holch

As each row in my 7*8 matrix represents a different day of the week,


My dutch isn't very good, but looking at your screenshot I would say that each COLUMN represents one day, while the rows represent the time slots within each day.

In the other post (which has been closed) your table is structured differently. There you have the rows/lines for one day and the columns for the time slots.

I'm not a LimeSurvey GmbH member. I answer at the LimeSurvey forum in my spare time. No support via private message.
Some helpful links: Manual (EN) | Question Types | Workarounds
Dernière édition: il y a 5 mois 1 semaine par holch.

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

Plus d'informations
il y a 5 mois 1 semaine #184029 par sabinevansleeuwen
Dear Tony Partner,

Thanks again for your useful comments, it worked perfectly!!

I have one final question that unfortunately I am not able to solve on my own:
- I would like to be able to click on more than one button in the matrix at a time, so to create the condition "more than one answer possbile". How can I adjust this is in the custom-css and/or Java-script?

Thanks in advance for your reaction!

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

Plus d'informations
il y a 5 mois 5 jours #184122 par DenisChenu
You must not use a single choice question for this …

Best seems an array number, checkbox option. No js workaround needed, and can show celle as button easily.


Sample with skelvanilla

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 .

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

Plus d'informations
il y a 2 semaines 6 jours #189049 par rsu_nokia_vim
Hi, where I have to put this script for changing buttons color?

Thanks



tpartner écrit: Q1

1) Add this script to the question source to assign "row" classes:

<script type="text/javascript" charset="utf-8">
 
	$(document).on('ready pjax:scriptcomplete',function(){
 
		// Identify this question
		var thisQuestion = $('#question{QID}');
 
		// "Row" classes
		$('.bootstrap-buttons-div', thisQuestion).each(function(i) {
			$(this).addClass('row-'+Math.ceil((i+1)/8));
		});
	});
</script>

2)Add something like this to custom.css:

.columns-8 .bootstrap-buttons-div .btn-primary {
	border-color: #2D7831; 
	background-color: #328637; 
}
 
.columns-8 .bootstrap-buttons-div.row-2 .btn-primary { background-color: #37943D; }
 
.columns-8 .bootstrap-buttons-div.row-3 .btn-primary { background-color: #3DA343; }
 
.columns-8 .bootstrap-buttons-div.row-4 .btn-primary { background-color: #42B149; }
 
.columns-8 .bootstrap-buttons-div.row-5 .btn-primary { background-color: #4BBC51; }
 
.columns-8 .bootstrap-buttons-div.row-6 .btn-primary { background-color: #59C15F; }
 
.columns-8 .bootstrap-buttons-div.row-7 .btn-primary { background-color: #67D66C; }
 
.columns-8 .bootstrap-buttons-div .btn-primary:hover {
	border-color: #2D7831; 
	background-color: #2D7831; 
}
 
.columns-8 .bootstrap-buttons-div .btn-primary:active,
.columns-8 .bootstrap-buttons-div .btn-primary.active {
	border-color: #1D4D20; 
	background-color: #1D4D20; 
}

Q2

Add something like this to custom.css:

.columns-8 .answer-container {
	max-width: 500px;
}

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

Plus d'informations
il y a 2 semaines 6 jours #189053 par Joffm


Volunteers are not paid.
Not because they are worthless, but because they are priceless

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

Plus d'informations
il y a 2 semaines 6 jours - il y a 2 semaines 6 jours #189060 par DenisChenu

rsu_nokia_vim écrit: Hi, where I have to put this script for changing buttons color?

Thanks



tpartner écrit: Q1

1) Add this script to the question source to assign "row" classes:

[…]

2)Add something like this to custom.css:

[…]

Q2

Add something like this to custom.css:

Unsure you read the answer … of @tparner

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 .
Dernière édition: il y a 2 semaines 6 jours par DenisChenu.

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!