Welcome to the LimeSurvey Community Forum

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

Align bootstrap buttons to center of page and change color after click

  • HellaThielen
  • HellaThielen's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
1 week 3 days ago #263494 by HellaThielen
Please help us help you and fill where relevant:
Your LimeSurvey version:  LimeSurvey Cloud   Versie 6.5.5
Survey theme/template: Vanilla
==================
I have two questions:

1) I have a question with 5 bootstrap buttons that are presented horizontally. The 5 buttons are now aligned to the left of the page, I would like to align them to the center of the page. I have looked at these topics ( forums.limesurvey.org/forum/design-issue...pe-questions-yes-not
forums.limesurvey.org/forum/design-issue...uttons-to-the-center ) but have not succesfully been able to adapt the code. Can you offer me help? (see screenshot of an example question below)

2) I tried to change the color of the bootstrap buttons. I want them to color grey when clicked off when somebody hovers over the button. 
I have changed the code below to the custom.css file. My buttons now are grey when clicked and when the mouse hovers above the button but when the mouse moves away from the button after it is clicked, the background color of the button changes to blue. How can I change this?

Thank you so much for the help!

.btn-primary {
    background-color: white;
    border-color: black;
    color: black;
}

.btn-primary:active, .btn-primary.active {
    background-color: grey !important ;
    border-color: black !important;
}
.btn-primary:hover {
    background-color: grey !important;
    border-color: black !important;
}

.btn-primary.active:hover {
  background-color: grey !important;
  border-color: black !important;


Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 week 3 days ago - 1 week 3 days ago #263513 by Joffm
Hi,
yes, it is a bit different as LimeSurvey 6.x. is based on bootstrap 5.
To get your colors you may read this
[url] forums.limesurvey.org/forum/design-issue...strap-buttons#263175 [/url]

And additionally I set
Code:
.w-100 {
  width: 24% !important;
  margin-left: 38%;
}


 

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 1 week 3 days ago by Joffm.

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 week 3 days ago - 1 week 3 days ago #263545 by tpartner
You may want to put media queries on that. 24% on a phone will be quite small.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 1 week 3 days ago by tpartner.

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
1 week 2 days ago #263654 by Joffm
And I misunderstood / didn't read exactly / didn't see
I thought these were the buttons 
 

Well, you know bootstrap divides each row into twelve parts
12 because you can divide 12 by 1, 2, 3, 4, 6, 12, but not by 5 or 7.
Meaning you can't put 5 elements into one row, you have to use 6, with the last element empty.

So you have to move the entire row a bit.
You can do this by adding a left margin to the class "ls-answers"
Code:
.ls-answers {
  margin-left: 10%;
}

You may adapt the 10% to your needs.
 
Joffm
 

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

Please Log in to join the conversation.

  • HellaThielen
  • HellaThielen's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 days 1 hour ago #264622 by HellaThielen
Thank you so much for the help. I was able to move all the buttons more to the center.

I was also able to change the color: the buttons still change to blue (with a blue border and white text) when I click them (see video). Is there any way I could change this?

File Attachment:

File Name: Schermopna...6.36.zip
File Size:572 KB

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 days 14 hours ago #264642 by Joffm
Please, send the lss export of the survey (only relevant questions)
Joffm 

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

Please Log in to join the conversation.

  • HellaThielen
  • HellaThielen's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
8 hours 2 minutes ago #264693 by HellaThielen
Thank you for the quick reply. Please find the lss code attached.

Thank you for your help.  

File Attachment:

File Name: limesurvey...5-20.lss
File Size:40 KB

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
6 hours 51 minutes ago #264695 by Joffm
Hm,
where is the script?
I only see this (I cleaned a bit)


If I insert this already shown css snippet
Code:
<style>
.ls-answers {
  margin-left: 10%;
}
</style>

it is fine except the alignment. But this you can adapt with a <br/> tag.
And why do you show the numbers at all?
 

Another thing.
This is more or less a scale. Later you want to calculate some statistical values, like mean, stdvar. etc, and run some statistical tests.
But what do you expect if you use "text" codes, like "AO01", "AO02", ...
Now you only get nominal data and may calculate frequencies, or maybe a CHI-Square, but not more.
Use numerical codes!

JOffm
 

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

Please Log in to join the conversation.

Lime-years ahead

Online-surveys for every purse and purpose