Overflow-x hidden not working in Google Chrome with iFrames

Question

I'm using an iFrame on the following website for the Online Booking system as shown below:

http://www.marandy.com/one2onev2

The iFrame should only display a scroll bar on the y-axis. In Firefox, IE and Safari this is working as expected, however in Google Chrome this is still showing both scroll bars (y & x).

Here is the code:-

HTML

 <div id="main-online-booking"> <iframe id="main-online-frame" class="booking-dimensions" src="http://www.marandy.com/one2oneob/login-guest.php" frameborder="0"></iframe> <div id="main-online-user"> <a href="#" onclick="changesrc('main-online-frame','http://www.marandy.com/one2oneob/login.php')"><img alt="One 2 One Account" id="img-onlinebooking-acc" src="images/account.png" /></a> <a href="#" onclick="changesrc('main-online-frame','http://www.marandy.com/one2oneob/login-guest.php')"><img alt="One 2 One Guest" id="img-onlinebooking-guest" src="images/guest.png" /></a> </div> </div>

CSS

#main-online-booking { height: 488px; border-bottom: 6px #939393 solid; border-left: 6px #939393 solid; border-right: 6px #939393 solid; z-index: 4; background-color: #fff; } #main-online-frame { overflow-x: hidden; frameBorder: 0; height: 488px; }

The overflow-x: hidden property appears to only not be working in Google Chrome on iFrames, any suggestions?

Akhil Thesiya · Accepted Answer · 2013-03-30 09:12:53Z

2

Add in Your iframe scrolling="no" and increase height #main-online-frame.......

answered Mar 30, 2013 at 9:12

Akhil Thesiya

9505 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nsilva Over a year ago

I have tried this, the problem is that the pages change in height as your making a booking so it cannot be a 'set height'

nsilva Over a year ago

I have also tried this, I am still wanting the vertical scroll bar. with scrolling="no" and overflow-x: scroll or auto, it is actually not showing either scroll bar in chrome on an iFrame

mtbno Over a year ago

Seems like the scrolling attribute is marked as deprecated

Miljan Puzović · Accepted Answer · 2013-03-30 09:31:43Z

2

On page inside your iframe (http://www.marandy.com/one2oneob/login-guest.php), add this html {overflow-x: hidden; overflow-y: auto;}.

And check initial height of page inside iframe. Make sure that initial height fits in height of iframe.

edited Mar 30, 2013 at 9:31

answered Mar 30, 2013 at 9:17

Miljan Puzović

5,8201 gold badge26 silver badges30 bronze badges

6 Comments

nsilva Over a year ago

would you add this to the body tag?

Miljan Puzović Over a year ago

In my inspector on Google Chrome, this worked on html tag only. I didn't note any difference if I set this on the body tag.

nsilva Over a year ago

I have just updated this, html { background-color:#ffffff; overflow-y:hidden; overflow-x:hidden; } and it is still showing the x-scroll }

Miljan Puzović Over a year ago

Nope, just vertical. Set overflow-y: auto; if you don't want vertical scroll bar by default, and check initial height of page inside iframe. Make sure that initial height fits in height of iframe.

nsilva Over a year ago

Strange, in Chrome, I can still see both horizontal and vertical scroll bars

|

Zach · Accepted Answer · 2013-04-16 03:46:15Z

I ran into this same issue where Chrome was not applying overflow-x:hidden correctly, but all other browsers were. It wasn't an iFrame, but rather a div. I struggled with this for about 4 weeks and finally found that if I simply apply position:relative to that same div, it will work properly. Hopefully this is helpful to someone.

Collectives™ on Stack Overflow

Overflow-x hidden not working in Google Chrome with iFrames

3 Answers 3

3 Comments

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

6 Comments

Comments

Related