Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

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

  • sabinevansleeuwen
  • sabinevansleeuwen's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 years 10 months 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!
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 10 months 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:

Code:
@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.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 10 months ago #183970 by tpartner
...or, for less wasted white-space:

Code:
@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.
The following user(s) said Thank You: sabinevansleeuwen
The topic has been locked.
  • sabinevansleeuwen
  • sabinevansleeuwen's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 years 10 months 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!
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 10 months ago #183986 by tpartner
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;
}


Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The topic has been locked.
  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 10 months ago - 4 years 10 months 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 answer at the LimeSurvey forum in my spare time, I'm not a LimeSurvey GmbH employee.
No support via private message.

Last edit: 4 years 10 months ago by holch.
The topic has been locked.
  • sabinevansleeuwen
  • sabinevansleeuwen's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
4 years 10 months 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!
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 10 months 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 , plugin development .
I don't answer to private message.
The topic has been locked.
More
4 years 6 months ago #189049 by rsu_nokia_vim
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;
}

The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 6 months ago #189053 by Joffm

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

manual.limesurvey.org/Workarounds:_Manip...tc..29_in_LimeSurvey

2)Add something like this to custom.css:

manual.limesurvey.org/New_Template_System_in_LS3.x#Theme_Editor

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 6 months ago - 4 years 6 months ago #189060 by DenisChenu

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

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 .
I don't answer to private message.
Last edit: 4 years 6 months ago by DenisChenu.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose