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

More
2 months 2 weeks ago #183968 by 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!
Attachments:

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

LimeSurvey Partners
More
2 months 2 weeks ago #183969 by 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
Attachments:

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

More
2 months 2 weeks ago #183970 by 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
Attachments:
The following user(s) said Thank You: sabinevansleeuwen

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

More
2 months 2 weeks ago #183985 by 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!
Attachments:

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

More
2 months 2 weeks ago #183986 by 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
Attachments:

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

More
2 months 2 weeks ago - 2 months 2 weeks ago #183990 by 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
Last edit: 2 months 2 weeks ago by holch.

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

More
2 months 1 week ago #184029 by 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!

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

More
2 months 1 week ago #184122 by 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 .
An error happen ? Before make a new topic : remind the Debug mode .

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!