RTL right allign text shows fine but the checkbox remains on the left side

Re: RTL right allign text shows fine but the checkbox remains on the left side

by Dominique Bauer -
Number of replies: 0
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers
Hello Hamza,

There are two main ways to modify the format of elements on a web page, either with CSS or with jQuery:

  1. Adding CSS is the standard way. Unfortunately, the Atto editor removes the CSS code (contained in the <style> tags). On the other hand, you can use the Plain text area editor which does not remove the CSS.
  1. jQuery has the advantage of not being erased by the Atto editor. For all practical purposes, it is equivalent to CSS.

There are different places you can place CSS or jQuery:

  1. You can place CSS in Site Administration / Appearance / Themes - Boost / Advanced settings (that is, if you are using the Boost theme). You can also place CSS as well as jQuery in Site Administration / Appearance / Additional HTML. This will affect all pages on the site.
  1. You can put CSS or jQuery in a block. This will only affect the pages where the block appears.
  1. You can place CSS or jQuery in a resource or activity. This will only affect the pages where this resource or activity appears.


CSS code

<style>
div.que.multichoice div.answer {
    direction: rtl;
    text-align: right;
}
</style>


jQuery code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;
</script>
<script>  
$(window).on( "load", function() {
    $("div.que.multichoice div.answer").css("direction","rtl");
    $("div.que.multichoice div.answer").css("text-align","right");
});
</script>