CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
TheGaME
TheGaME

Reputation: 453

Show iframe scrollbar on left side in firefox and chrome

I have my piece of code below:

<!DOCTYPE html>
<html>
 <body>
  <div id="parentDiv" style="border:1px solid blue;" dir="rtl">
   <iframe src="http://www.w3schools.com" height="500" width="700">
    <p>Your browser does not support iframes.</p>
   </iframe>
  </div>
 </body>
</html>

When I run this code in Firefox or Chrome, I could not see the iframe scrollbar on the left side as it stays always on the right side of the iframe. But, in IE it works perfectly.

I would like to know if there is any CSS or JS solution for this.

Upvotes: 0

Views: 1980

Answers (2)

TheGaME
TheGaME

Reputation: 453

Basically, we cannot show the Iframe scrollbar on the left side in chrome when the html dir tag holds the "rtl" value. I just found the answer in this link.

For Firefox, it is same as chrome browser and the answer lies in this link.

Upvotes: 0

Rachel Gallen
Rachel Gallen

Reputation: 28573

Et voila! a scrollable iframe with the scroll on the left

Here's a fiddle https://jsfiddle.net/RachGal/s3z17cLw/

$( ".main" ).wrap( "<div class='scroll'></div>" );
div.main {
     height:150px!important;
     float:left;
     direction: ltr;
    
}
.scroll {
      unicode-bidi:bidi-override;
      direction: rtl;
      overflow-y: scroll;
      overflow-x:hidden;
}
.inside{
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="main" ><iframe class="inside" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3309.3312622412445!2d-83.37737678492407!3d33.958324180631536!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f66cdecc8d0783%3A0x4f152e9d93fa5d6!2s170+College+Ave%2C+Athens%2C+GA+30601%2C+USA!5e0!3m2!1sen!2sie!4v1464026910465" height="300" frameborder="0" style="border:0">
</iframe>
</div>

Upvotes: 1

Related Questions