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!

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:

...or, for less wasted white-space:

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!

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:

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.

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!

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

Hi, where I have to put this script for changing buttons color?

Thanks

tpartner wrote: Q1

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

Code:

<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:

Code:

.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:

Code:

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

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

www.limesurvey.org/manual/Workarounds:_M...tc..29_in_LimeSurvey

2)Add something like this to custom.css:

www.limesurvey.org/manual/New_Template_S...n_LS3.x#Theme_Editor

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

Thanks

tpartner wrote: 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