Welcome to the LimeSurvey Community Forum

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

Five Buttons in a Row

  • teracomp
  • teracomp's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
4 years 4 months ago #190710 by teracomp
Five Buttons in a Row was created by teracomp
I have a lot of surveys that use Likert-5 responses: Strongly agree, Agree, Neutral, Disagree, Strongly disagree.
I would like to have an option that includes "5 Buttons in a row" to properly accommodate the buttons. This would require some css to help Bootstrap, like the code below.

Even if it's too difficult to add "Fifths" to the Theme Options, what is the proper procedure for adding a 5-column answer layout?

Code:
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
 
.col-xs-5ths {
    width: 20%;
    float: left;
}
 
@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}
 
@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}
 
@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

Dave Phillips
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 4 months ago #190712 by DenisChenu
Replied by DenisChenu on topic Five Buttons in a Row
Why not a specific Css class ?

And directly use Flex / flex-item :)
developer.mozilla.org/en-US/docs/Web/CSS/flex ?

maybe just a flex class can be a good idea :)
X on one row

See if we need -sm etc …

flex-sm
flex-xs etc ?

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.
  • teracomp
  • teracomp's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
4 years 4 months ago #190715 by teracomp
Replied by teracomp on topic Five Buttons in a Row
Using .flex-sm .flex-xs sounds great, but where can I add this in the interface? When I add classes to Display Options, they apply to the question, not the individual answers. Do I have to use Javascript to replace the col-sm-2 class with flex-sm?

Dave Phillips
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 4 months ago #190716 by DenisChenu
Replied by DenisChenu on topic Five Buttons in a Row

teracomp wrote: Using .flex-sm .flex-xs sounds great, but where can I add this in the interface? When I add classes to Display Options, they apply to the question, not the individual answers. Do I have to use Javascript to replace the col-sm-2 class with flex-sm?


With flex-answers class in CSS class (css_class)

Update custom.css
with
Code:
.flex-answers .ls-answers ul{
  display: flex;
  flex-direction: row;
}
.flex-answers .ls-answers .answer-item{
  flex: auto;
}

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.
  • teracomp
  • teracomp's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
4 years 4 months ago #190717 by teracomp
Replied by teracomp on topic Five Buttons in a Row
I forgot to mention, I'm using Bootstrap Buttons, so I guess there's more to it.

Dave Phillips
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 4 months ago #190720 by DenisChenu
Replied by DenisChenu on topic Five Buttons in a Row

I never check with this theme …
And there are a forced col-sm2 …


Maybe
Code:
.flex-answers .ls-answers{
  display: flex;
  flex-direction: row;
}
.flex-answers .ls-answers .bootstrap-buttons-div{
  flex: auto;
}
.flex-answers .ls-answers .col-sm-2{
  float:none;
  with:auto;
}

But next time , my advice is for SkelVanilla (where button can be set globally).

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 following user(s) said Thank You: teracomp
The topic has been locked.
  • teracomp
  • teracomp's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
4 years 4 months ago #190725 by teracomp
Replied by teracomp on topic Five Buttons in a Row
I really appreciate your response. Here's my solution with some additional css styling that I'm tweaking based on the labels:
Code:
/*** Likert 5 Support ***/
@media (max-width: 1200px ){
    .likert-five .btn {
        font-size: 12px;  /** tweak as needed **/
        height: 68px;      /** tweak as needed **/
        white-space: normal;
    }
}
@media (min-width: 768px) {
    .likert-five .col-sm-2 {
        width: 19%;
    }
    .likert-five .btn {
        height: 68px;     /** tweak as needed **/
        padding: 10px 0;
        white-space: normal;
    }
}
 
@media (max-width: 768px) {
    .likert-five .col-sm-2 {
        width: 19%;
    }
    .likert-five .btn {
        height: 68px;     /** tweak as needed **/
        padding: 10px 0;
        white-space: normal;
    }
    .likert-five .btn {
        padding: 10px;
        font-size: 15px;
        height: auto;
    }
}
@media (min-width: 769px) and (max-width: 992px) {
    .likert-five .btn {
        font-size: 12px;
    }
}

Dave Phillips
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose