changing the side of the radio button on the flat layout using custom css | XM Community
Question

changing the side of the radio button on the flat layout using custom css

M
Badge +1

hi!
I am using the flat layout, and I want to move the radio buttons from the left side of the answers text to the right side, using the custom css.
(for example - on the modern layout the buttons are on the right side of the text)
anyone has an idea what code can I use to do that?
thank you!

8 replies

C
Rank
Userlevel 4
Badge +23

Hi MorMey ,
Kindly try out the below code in you custom CSS, i have used it for my survey and it worked perfectly!!

Skin .MC .MAVR label.q-checkbox, .Skin .MC .SAVR label.q-radio {
  float: right;
  margin-right: 10px;
  padding: 0;
}

M
Badge +1

https://community.qualtrics.com/XMcommunity/discussion/comment/46842#Comment_46842Thank you! unfortunetly it did not work for me.
I pasted the code (exactly as you wrote it) in the custom css box that is in the 'style' section.
maybe I need to put the code someplace else? or do I need to change something in the code to adap it to my survey?

C
Rank
Userlevel 4
Badge +23

Hi MorMey
May i request you to perform Ïnspect element on your radio button. IT will give you similar code like this-
Skin .MC .MAVR label.q-checkbox, .Skin .MC .SAVR label.q-radio {
  float: left;
  margin-right: 10px;
  padding: 0;
}
Once you get this code just change "left" to "right" and you will be good to go. I think themes might be playing the role here.. not sure.

Y
Badge +1

Hi Chhavi_Ch ,
i have the same problem as mor,
but i know very little about css and html
could you explain to me excectly where and how to inspect?
this is extremly important to us, so your help is a real blessing

thank you

C
Rank
Userlevel 4
Badge +23

hi yishayh ,
Sure, i can help you in the same.
Open the preview link of your survey, do the left click and click on Inspect.
Inspect menu will be open , follow below steps -

  • click the highlighted icon

  • image.pngSelect the zone of radio button


image.pngOn your right side of inspect menu you will see the Styles and a code for your radio button will come up as a result of step 2
image.pngNow copy this code, open your survey. Go to Look & feel --> Style---> custom CSS.
Paste the code shared in the above screenshot and replace left with right. You will be good to go.

Tom_1842
Rank
Userlevel 7
Badge +27

Hi yishayh , I've used the below in the past for Flat layout. It also adjusts it for Mobile view, but you may want to play with the values:
@media (min-width:481px){
.Skin label.MultipleAnswer>span::before, .Skin label.SingleAnswer>span::before {
margin-left:93% !important;
}
}

@media (max-width:480px){
.Skin label.MultipleAnswer>span::before, .Skin label.SingleAnswer>span::before {
margin-left:85% !important;
}
}

Tom_1842
Rank
Userlevel 7
Badge +27

Also, for Matrix tables mobile view, float right works well:
.JFEScope .Skin .q-matrix.mobile input[type=checkbox], .JFEScope .Skin .q-matrix.mobile input[type=radio], .JFEScope .Skin .q-matrix.mobile label.q-checkbox, .JFEScope .Skin .q-matrix.mobile label.q-radio {
float:right;
}

G
Rank
Badge +3

Hi yishayh , I've used the below in the past for Flat layout. It also adjusts it for Mobile view, but you may want to play with the values:
@media (min-width:481px){
.Skin label.MultipleAnswer>span::before, .Skin label.SingleAnswer>span::before {
margin-left:93% !important;
}
}

@media (max-width:480px){
.Skin label.MultipleAnswer>span::before, .Skin label.SingleAnswer>span::before {
margin-left:85% !important;
}
}




I have a similar issue.
In my case I would like to change the colour of the radio button from white to black and mantain the grey background. 
Any advise on how to change my CSS code to achieve this ?
@Tom_1842 , @Chhavi_Ch  Thank you so much. 

1 Attachment

Leave a Reply


Terms & Conditions