Five Buttons in a Row

More
1 month 1 week ago #190710 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?

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

Please Log in or Create an account to join the conversation.

LimeSurvey Partners
More
1 month 1 week 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 .
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in or Create an account to join the conversation.

More
1 month 1 week 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

Please Log in or Create an account to join the conversation.

More
1 month 1 week 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
.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 .
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in or Create an account to join the conversation.

More
1 month 1 week 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

Please Log in or Create an account to join the conversation.

More
1 month 1 week 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
.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 .
An error happen ? Before make a new topic : remind the Debug mode .
The following user(s) said Thank You: teracomp

Please Log in or Create an account to join the conversation.

More
1 month 1 week 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:
/*** 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

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!