Can I change the layout at the question-level without overriding the entire layout? | XM Community
Solved

Can I change the layout at the question-level without overriding the entire layout?

  • 11 February 2022
  • 8 replies
  • 501 views
M
Badge +1

Hello,
Is it possible to change the layout of specific questions without overriding the whole layout of the survey?
Specifically, I currently have a theme that has the following layout (Classic):
Screenshot 2022-02-07 at 16.48.14.png
I want to continue having this theme, however, for certain questions, I would prefer having checkboxes (for multiple choice) or radio buttons (for single choices) (example below, with Flat as the Layout):
Screenshot 2022-02-07 at 16.50.31.png
Any help would be appreciated. Please let me know if I should elaborate.

icon

Best answer by Tom_1842 21 September 2023, 16:10

View original

8 replies

TomG
Rank
Userlevel 7
Badge +27

You can add css to specific pages to override the default css by placing the new rules inside a 

]
However, I still don't know the exact CSS function/element I need within the HTML tag to override the button style. 
Specifically, I want the following style - the Minimal 2014 theme:
image.pngDo you know how to precisely go about changing the style from regular buttons to the checkboxes for a specific question?
Thank you in advance!
TomG
Rank
Userlevel 7
Badge +27

https://community.qualtrics.com/XMcommunity/discussion/comment/43666#Comment_43666Use your browser's inspect feature to examine the rules associated with the list items in the minimal theme, then using those as a guide, create rules in your survey to override the existing rules that style the list items.

Tom_1842
Rank
Userlevel 7
Badge +27

Hi MilBu , if you still need, I was able to follow TomG's recommendation but using the check boxes from the 'Flat' layout. The below code will put the checkboxes from the 'Flat' layout in place for Multiselect question that use the Classic Layout for a single page.
In the Question Text of any question on a page, add the below to the HTML/Source view "<>" using the Rich Content Editor:

Click here to write question text.

SuhasM
Rank
Userlevel 4
Badge +16

Great job providing the solution TomG! 👏 and thank you Tom_1842 for circling back and providing additional custom code! The community team loves your contributions! 🙂

Tom_1842
Rank
Userlevel 7
Badge +27

Updated comment here:

<style>
.Skin label.MultipleAnswer>span::before {
content: "";
display: inline-block;
width: 17px;
height: 17px;
left: 10px;
vertical-align: middle;
margin-right: 10px;
border-radius: 3px;
border: 2px solid #9b9b9b;
border-image: initial;
background: 0 0 !important;
}

.Skin label.MultipleAnswer.q-checked>span::before {
background:  #26B6EA url(/jfe/themes/base-templates/qualtrics/base/version-1658262440254-05dae3/files/check.svg) no-repeat center center !important;
background-size: 85% !important;
border: 2px solid #007ac0 !important;
-webkit-animation: check .2s forwards;
-moz-animation: check .2s forwards;
-o-animation: check .2s forwards;
animation: check .2s forwards;
}

.Skin label.MultipleAnswer {
    position: relative;
    padding-left: 40px !important;
}

.Skin label.MultipleAnswer>span::before {
    position: absolute;
    top: 50%;
    margin-top: -0.6em;
}
</style>
Click here to write question text.

 

K
Badge +3

The code above was able to work for me as well! And I replaced all the ‘.MultipleAnswer’ with 

‘.SingleAnswer’ for a single -select question. The checkboxes are appearing and the functionality is there, however I was wondering if radio buttons can be used instead of check boxes? Which part of the code will need to be updated to use radio buttons instead of check boxes?

 

I tried changing the ‘q-checked’ to ‘q-radio’, but the survey still shows the answer choices with a checkbox rather than a radio button.

Tom_1842
Rank
Userlevel 7
Badge +27

@KellanMagaoay I built on the above for a better blending of Classic layout and the Radio buttons/Checkboxes from the Flat layout. Using the Classic layout as a base, the below will work to:

  • add Radio buttons to Single Answer Multiple Choice questions for Vertical and Horizontal alignments
  • add Checkboxes to Multiple Answer Multiple Choice questions for Vertical and Horizontal alignments

As this thread is about question/page level styling, I wrap it all in a <style> tag so it can be included inside Question Text HTML, but it could all be added as CSS to the Style section of the Look and Feel if you wanted Radio buttons and Checkboxes for Multiple Choice questions throughout a Classic layout survey.

If you only want this to only apply to Single Answer Multiple Choice questions, remove any lines of code that include .MultipleAnswer, .MAVR, or .MAHR.

<style type="text/css">/*Adding Radio Buttons and Checkboxes from Flat layout to Classic*/

/*Adding for Vertical alignments*/
/*Adds space for vertical Radio buttons and Checkboxes*/
.Skin .MAVR label.MultipleAnswer, .Skin .SAVR label.SingleAnswer {
    position: relative;
    padding-left: 40px !important;
}

/*Format the space where the vertical Radio buttons and Checkboxes are*/
.Skin .MAVR label.MultipleAnswer>span::before, .Skin .SAVR label.SingleAnswer>span::before {
    position: absolute;
    top: 50%;
    margin-top: -0.7em;
}

/*Create Checkboxes for vertical multiselects*/
.Skin .MAVR label.MultipleAnswer>span::before {
content: "";
display: inline-block;
width: 17px;
height: 17px;
left: 10px;
vertical-align: middle;
margin-right: 10px;
border-radius: 3px;
border: 2px solid #9b9b9b;
border-image: initial;
background: 0 0 !important;
}

/*Format the vertical Checkboxes when selected*/
.Skin .MAVR label.MultipleAnswer.q-checked>span::before {
background:  #26B6EA url(/jfe/themes/base-templates/qualtrics/base/version-1658262440254-05dae3/files/check.svg) no-repeat center center !important;
background-size: 85% !important;
border: 2px solid #007ac0 !important;
-webkit-animation: check .2s forwards;
-moz-animation: check .2s forwards;
-o-animation: check .2s forwards;
animation: check .2s forwards;
}

/*Create vertical Radio buttons for single selects*/
.Skin .SAVR label.SingleAnswer>span::before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    left: 10px;
    vertical-align: middle;
    margin-right: 10px;
    border-radius: 100%;
    border: 2px solid #9b9b9b;
    border-image: initial;
    background: 0 0 !important;
}

/*Format the vertical Radio button when selected*/
.Skin .SAVR label.SingleAnswer.q-checked.q-focused>span::before, .Skin .SAVR label.SingleAnswer.q-checked>span::before {
    border: 2px solid #007ac0;
    background: #26B6EA !important;
    -webkit-box-shadow: inset 0 0 0 3px #fff;
    -moz-box-shadow: inset 0 0 0 3px #fff;
    box-shadow: inset 0 0 0 3px #fff;
    -webkit-animation: radio .2s forwards;
    -moz-animation: radio .2s forwards;
    -o-animation: radio .2s forwards;
    animation: radio .2s forwards;
}


/*Adds space for Horizontal Radio buttons and Checkboxes for Horizontal alignment*/
/*Adds formatting for Horizontal Radio buttons and Checkboxes selected*/
.Skin .SAHR label.q-radio {
    height: 21px !important;
    width: 21px !important;
    border: 2px solid #9b9b9b !important;
}

.Skin .SAHR label.q-radio.q-checked, .Skin .SAHR label.q-radio.q-checked.q-focused {
    border: 2px solid #007ac0 !important;
    background: #26B6EA !important;
    -webkit-box-shadow: inset 0 0 0 3px #fff !important;
    -moz-box-shadow: inset 0 0 0 3px #fff !important;
    box-shadow: inset 0 0 0 3px #fff !important;
    -webkit-animation: radio .2s forwards !important;
    -moz-animation: radio .2s forwards !important;
    -o-animation: radio .2s forwards !important;
    animation: radio .2s forwards !important;
}

.Skin .MAHR label.q-checkbox {
    height: 20px !important;
    width: 20px !important;
    -webkit-border-radius: 2px !important;
    -moz-border-radius: 2px !important;
    -ms-border-radius: 2px !important;
    -o-border-radius: 2px !important;
    border-radius: 2px !important;
    border: 2px solid #9b9b9b !important;
}

.Skin .MAHR label.q-checkbox.q-checked {
background:  #26B6EA url(/jfe/themes/base-templates/qualtrics/base/version-1658262440254-05dae3/files/check.svg) no-repeat center center !important;
background-size: 85% !important;
border: 2px solid #007ac0 !important;
-webkit-animation: check .2s forwards !important;
-moz-animation: check .2s forwards !important;
-o-animation: check .2s forwards !important;
animation: check .2s forwards !important;
}


/*phone and desktop*/
/*desktop, buttons below*/
@media all and (min-width:480px){

.Skin .MC .MAHR table td, .Skin .MC .SAHR table td {
    text-align: center !important;
}

.Skin .MAHR td.LabelContainer, .Skin .SAHR td.LabelContainer {
    margin-bottom: 25px!important;
}

.Skin .MAHR td.LabelContatiner, .Skin .SAHR td.LabelContatiner {
    vertical-align: top !important;
    position: relative !important;
}


.Skin .MAHR label.MultipleAnswer.LabelPositionBELOW, .Skin .SAHR label.SingleAnswer.LabelPositionBELOW {
    padding-left: 20px!important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding-top: 5px !important;
    padding-bottom: 0 !important;
}

.Skin .MAHR td label.q-checkbox, .Skin .SAHR td label.q-radio {
    display: block !important;
position: absolute !important;
    left: calc(50% - 10px) !important;
    bottom: 5px !important;
    cursor: pointer !important;
}

.Skin .MAHR label.MultipleAnswer.LabelPositionBELOW>span, .Skin .SAHR label.SingleAnswer.LabelPositionBELOW>span {
    padding-bottom: 35px !important;
}

}

/*phone*/
/*phone, buttons on side*/
@media all and (max-width:479px){

.Skin .MAHR label.MultipleAnswer, .Skin .SAHR label.SingleAnswer {
    position: relative;
    padding-left: 40px !important;
}

/*Format the space where the Radio buttons and Checkboxes are*/
.Skin .MAHR label.MultipleAnswer>span::before, .Skin .SAHR label.SingleAnswer>span::before {
    position: absolute;
    top: 50%;
    margin-top: -0.7em;
}

/*Create Checkboxes for multiselects*/
.Skin .MAHR label.MultipleAnswer>span::before {
content: "";
display: inline-block;
width: 17px;
height: 17px;
left: 10px;
vertical-align: middle;
margin-right: 10px;
border-radius: 3px;
border: 2px solid #9b9b9b;
border-image: initial;
background: 0 0 !important;
}

/*Format the Checkboxes when selected*/
.Skin .MAHR label.MultipleAnswer.q-checked>span::before {
background:  #26B6EA url(/jfe/themes/base-templates/qualtrics/base/version-1658262440254-05dae3/files/check.svg) no-repeat center center !important;
background-size: 85% !important;
border: 2px solid #007ac0 !important;
-webkit-animation: check .2s forwards;
-moz-animation: check .2s forwards;
-o-animation: check .2s forwards;
animation: check .2s forwards;
}

/*Create Radio buttons for  single selects*/
.Skin .SAHR label.SingleAnswer>span::before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    left: 10px;
    vertical-align: middle;
    margin-right: 10px;
    border-radius: 100%;
    border: 2px solid #9b9b9b;
    border-image: initial;
    background: 0 0 !important;
}

/*Format the Radio button when selected*/
.Skin .SAHR label.SingleAnswer.q-checked.q-focused>span::before, .Skin .SAHR label.SingleAnswer.q-checked>span::before {
    border: 2px solid #007ac0;
    background: #26B6EA !important;
    -webkit-box-shadow: inset 0 0 0 3px #fff;
    -moz-box-shadow: inset 0 0 0 3px #fff;
    box-shadow: inset 0 0 0 3px #fff;
    -webkit-animation: radio .2s forwards;
    -moz-animation: radio .2s forwards;
    -o-animation: radio .2s forwards;
    animation: radio .2s forwards;
}

/*Adds space for Radio buttons and Checkboxes for Horizontal alignment*/
.Skin .MAHR label.MultipleAnswer.LabelPositionBELOW, .Skin .SAHR label.SingleAnswer.LabelPositionBELOW {
padding-left: 40px !important;
padding-right: 40px !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
height: 100% !important;
}

.Skin .MAHR label.MultipleAnswer.LabelPositionBELOW>span, .Skin .SAHR label.SingleAnswer.LabelPositionBELOW>span {
    padding-bottom: 0px !important;
}

}
</style>
Click to write the question text

 

Leave a Reply


Terms & Conditions