JavaScript: Using marginLeft to position rating stars over image

Question

Am using a JavaScript plugin to apply rating stars for a review. This [fiddle] has most of the code. The stars come in the place of the dropdown (the external resource isn't loading to show this in the fiddle). The stars are showing fine on the localhost, but I wanted to position the stars to appear somewhere in the middle (or maybe over the image itself, wherever).

To this effect, i'm making use of:

   $(function() {
    var _elm=document.getElementById('example2');
    _elm.style.marginLeft = "150px"; 
      $('#example2').barrating({
        theme: 'fontawesome-stars',
        readonly: true,
        initialRating: 3
      });    
 });

But the stars do not change their position. How do I position the stars then? For completion, there are no console errors.

Answer 1

The plugin is setting the example2 select to be display:none, So any changes on it wont be usefull.

You should apple your css directly to

.br-theme-fontawesome-stars .br-widget

For example you can give it

  margin-left:20px;
  margin-top:-50px;

But then it will be bellow the image so you can give it z-index

z-index:100;

and then you will see the changes on the arrows.

The final result will be:

.br-theme-fontawesome-stars .br-widget {
  height: 28px;
  white-space: nowrap;
  margin-left:20px;
  margin-top:-50px;
  z-index:100;
}

fiddle - https://jsfiddle.net/omwpz0tw/12/