got it, i used the columns

The survey is working fine, but only if I use the Arabic Language, the css rules got messed up.

I have used:
English - Working fine
Chineses - working fine
Frensh - working fine

Arabic - the css is not able to display correctly, not sure why.

I have attached all the snapshots to see.

Please help.

English:



Arabic:


Chiness:

tpartner wrote: Something like this:

Code:

.with-emoji .radio label::before,
.with-emoji .radio label::after {
  display: none;
}
 
.with-emoji .radio .label-text img {
  border: 4px solid #FFFFFF;
  box-sizing: content-box;
  -moz-transition: border-color 350ms ease; 
  -o-transition: border-color 350ms ease; 
  -webkit-transition:border-color 350ms ease; 
  transition: border-color 350ms ease;
}
 
.with-emoji .radio .label-text:hover img {
  border-color: #ECF0F1;
}
 
.with-emoji .radio input[type="radio"]:checked + label + .label-text img {
  border-color: #233140;
}

It doesn't look like any of your CSS is applied to the Arabic which is rendered right-to-left. Can you see the CSS in the source of the page?

I see only the template-rtl.css that show when I switch to Arabic.
So I added the code to the template-rtl.css and its working fine now in Arabic.

the templet.css does not show when I switch to arabic., I used firefox developer tools

Is that right?

Sounds to me like you've got it.

Hi Tony, i'm using Limesurvey 3, and I want to add emoji's to the radio button answers. How do I do this in Limeservey 3, your help would be appreciated. Thanks.

This whole thread explains what you want to do. Did you read it? What did you try?

holch wrote: This whole thread explains what you want to do. Did you read it? What did you try?

In LimeSurvey 3 : the only difference : theme.css is loaded too with rtl language. rtl language have just one more css (bootsrap-rtl.css).

I added the following to the end of the Custom.css file (in this thread it said to add it to the end of template.css, but I think this is for ls v2.7):

.with-emoji .radio label::before,
.with-emoji .radio label::after {
display: none;
}

.with-emoji .radio .label-text img {
border: 4px solid #FFFFFF;
box-sizing: content-box;
-moz-transition: border-color 350ms ease;
-o-transition: border-color 350ms ease;
-webkit-transition:border-color 350ms ease;
transition: border-color 350ms ease;
}

.with-emoji .radio .label-text:hover img {
border-color: #ECF0F1;
}

.with-emoji .radio input[type="radio"]:checked + label + .label-text img {
border-color: #233140;
}

Note: I have not specified any emoji images on the server.

Well, it won't work unless you upload images and assign CSS class to the question.