Multiple Choice Question - Hover State (video example) | XM Community
Skip to main content
Question

Multiple Choice Question - Hover State (video example)

  • July 10, 2023
  • 6 replies
  • 90 views
P
Level 5 ●●●●●
Forum|alt.badge.img+5

Hi Everyone

Hope you’re well.

I need some help with the below video example.

https://www.dropbox.com/s/9olr0vctaqshiin/Screen%20Recording%202023-07-10%20at%2009.51.14.mov?dl=0

As you can see when I deselect a multiple choice question then navigate away the box turns black (or darker). I would expect just the tick to show / not show. If I click outside of the options the state returns to what you would expect.

As always thanks for your help.

EDIT - Investigating further this seems to be retuning to the primary colour?

E
TusharDalwani
Abhishek_U

6 replies

E
QPN Level 5 ●●●●●
Forum|alt.badge.img+11
  • Eumetis
  • QPN Level 5 ●●●●●
  • July 10, 2023

Hi Everyone

Hope you’re well.

I need some help with the below video example.

https://www.dropbox.com/s/9olr0vctaqshiin/Screen%20Recording%202023-07-10%20at%2009.51.14.mov?dl=0

As you can see when I deselect a multiple choice question then navigate away the box turns black (or darker). I would expect just the tick to show / not show. If I click outside of the options the state returns to what you would expect.

As always thanks for your help.

EDIT - Investigating further this seems to be retuning to the primary colour?

Its an issue with the layout because of the css you might have applied. Change the layout in look and feel and check if it is happening in another layout. Let me know too if it changes with layout. I am facing the same issue. Thank you!

P
Level 5 ●●●●●
Forum|alt.badge.img+5
  • parkie_0007
  • Author
  • Level 5 ●●●●●
  • July 10, 2023

Thanks for getting back to me.

This is happening for all different layouts that I select….

Any ideas?

Thanks :)

E
E
QPN Level 5 ●●●●●
Forum|alt.badge.img+11
  • Eumetis
  • QPN Level 5 ●●●●●
  • July 10, 2023

Thanks for getting back to me.

This is happening for all different layouts that I select….

Any ideas?

Thanks :)

Could you share the custom css you are applying?

P
Level 5 ●●●●●
Forum|alt.badge.img+5
  • parkie_0007
  • Author
  • Level 5 ●●●●●
  • July 10, 2023

Sure, thanks!

This is from the survey.

.Skin .MC .TextEntryBox, .Skin .TE .ESTB .InputText, .Skin .TE .FORM .InputText, .Skin .TE .ML .InputText, .Skin .TE .PW .InputText, .Skin .TE .SL .InputText, .Skin .TE textarea, .Skin input.TextEntryBox, .Skin input[type=password], .Skin input[type=search], .Skin input[type=text], .Skin textarea {
    border: 1px solid #ffffff !important;
    background-color: #ffffff !important;
    color: #262626 !important;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    -ms-border-radius: 0px !important;
    -o-border-radius: 0px !important;
    border-radius: 0px !important;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: 262626;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: 262626;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: 262626;
}
.Skin label.MultipleAnswer.q-checked+input, .Skin label.MultipleAnswer.q-checked+textarea, .Skin label.SingleAnswer.q-checked+input, .Skin label.SingleAnswer.q-checked+textarea {
    border: 0 !important;
}
.Skin .TE .ChoiceStructure .Long
{
        width: 100% !important;
}

This is from the master theme in admin.

.Skin .ProgressBarContainer {
  width: 100% !important;
}
.Skin #LogoContainer {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.Skin .ValidationError {
color: #8C8C8C !important;
}
.Skin .TE .ML .InputText, .Skin .TE .SL .InputText, .Skin .TE .ESTB .InputText  {
    background: #fff;
    color: #000000;
    border-radius: 5px;
}
::placeholder {
 font-size: 14px;
color: #8C8C8C; 
}
.Skin #BrandingFooter, .Skin #Footer {
color: #8C8C8C;
}
.Skin .EndOfSurvey {
color: white;
}
a:link {
 color:#8C8C8C;
}

/* visited link */
a:visited {
 color: #8C8C8C;
}

/* mouse over link */
a:hover {
 color: #8C8C8C;
}

/* selected link */
a:active {
 color: #8C8C8C;
}
.Skin .ProgressBarFill {
background-color: #01FF95 !important;
}

Thanks :)

E
QPN Level 5 ●●●●●
Forum|alt.badge.img+11
  • Eumetis
  • QPN Level 5 ●●●●●
  • July 10, 2023

Sure, thanks!

This is from the survey.

.Skin .MC .TextEntryBox, .Skin .TE .ESTB .InputText, .Skin .TE .FORM .InputText, .Skin .TE .ML .InputText, .Skin .TE .PW .InputText, .Skin .TE .SL .InputText, .Skin .TE textarea, .Skin input.TextEntryBox, .Skin input[type=password], .Skin input[type=search], .Skin input[type=text], .Skin textarea {
    border: 1px solid #ffffff !important;
    background-color: #ffffff !important;
    color: #262626 !important;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    -ms-border-radius: 0px !important;
    -o-border-radius: 0px !important;
    border-radius: 0px !important;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: 262626;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: 262626;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: 262626;
}
.Skin label.MultipleAnswer.q-checked+input, .Skin label.MultipleAnswer.q-checked+textarea, .Skin label.SingleAnswer.q-checked+input, .Skin label.SingleAnswer.q-checked+textarea {
    border: 0 !important;
}
.Skin .TE .ChoiceStructure .Long
{
        width: 100% !important;
}

This is from the master theme in admin.

.Skin .ProgressBarContainer {
  width: 100% !important;
}
.Skin #LogoContainer {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.Skin .ValidationError {
color: #8C8C8C !important;
}
.Skin .TE .ML .InputText, .Skin .TE .SL .InputText, .Skin .TE .ESTB .InputText  {
    background: #fff;
    color: #000000;
    border-radius: 5px;
}
::placeholder {
 font-size: 14px;
color: #8C8C8C; 
}
.Skin #BrandingFooter, .Skin #Footer {
color: #8C8C8C;
}
.Skin .EndOfSurvey {
color: white;
}
a:link {
 color:#8C8C8C;
}

/* visited link */
a:visited {
 color: #8C8C8C;
}

/* mouse over link */
a:hover {
 color: #8C8C8C;
}

/* selected link */
a:active {
 color: #8C8C8C;
}
.Skin .ProgressBarFill {
background-color: #01FF95 !important;
}

Thanks :)

Hi, I am also facing this issue, and it seems like layouts other than flat layout help reduce the highlighting but there’s no way to totally eliminate it. 

P
Level 5 ●●●●●
Forum|alt.badge.img+5
  • parkie_0007
  • Author
  • Level 5 ●●●●●
  • July 10, 2023

Thanks for getting back to me.

I am using a flat layout, does that help?

Sure we can fix this! Come on community! 🤞

Terms & ConditionsAccessibility statement