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
4 months 6 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
    • Away
    • LimeSurvey Community Team
    • LimeSurvey Community Team
    More
    4 months 6 days ago - 4 months 5 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: 4 months 5 days ago by Joffm.

    Please Log in to join the conversation.

    • tpartner
    • tpartner's Avatar
    • Offline
    • LimeSurvey Community Team
    • LimeSurvey Community Team
    More
    4 months 5 days ago - 4 months 5 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: 4 months 5 days ago by tpartner.

    Please Log in to join the conversation.

    • Joffm
    • Joffm's Avatar
    • Away
    • LimeSurvey Community Team
    • LimeSurvey Community Team
    More
    4 months 4 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 months 4 weeks 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
    • Away
    • LimeSurvey Community Team
    • LimeSurvey Community Team
    More
    3 months 4 weeks 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
    3 months 3 weeks 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
    • Away
    • LimeSurvey Community Team
    • LimeSurvey Community Team
    More
    3 months 3 weeks 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.

    • HellaThielen
    • HellaThielen's Avatar Topic Author
    • Offline
    • New Member
    • New Member
    More
    1 month 3 weeks ago #266039 by HellaThielen
    Sorry for my late reply. Other projects required my attention.

    I was able to fix the problem with the color of the radio buttons while checked/clicked by copying this code in the custom.css script:
    .btn-check:checked + .btn-primary, 
    .btn-check:active + .btn-primary, 
    .btn-primary.active { 
    background-color: grey;
    color: black; 
    border-color: black; }

    Thank you for your help.
     

    Please Log in to join the conversation.

    Moderators: tpartnerholch

    Lime-years ahead

    Online-surveys for every purse and purpose