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">
<img alt="One 2 One Account" id="img-onlinebooking-acc" src="images/account.png" />
<img alt="One 2 One Guest" id="img-onlinebooking-guest" src="images/guest.png" />
</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?
Add in Your iframe scrolling="no" and increase height #main-online-frame.......
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.
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.
Related
I am working on iframes, and I need to show only a particular portion of the page.
I want to display only this part of the blog.
http://s17.postimg.org/ickav5d33/pic.png
This is the actual page of the blog.
This is my code:
<div style="border: 1px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 736px;">
<iframe scrolling="no" src="http://teamiwatefsu.blogspot.com/2014/09/jsfiddle-demo-div-display-inline-block.html" style="border: 0px none; margin-left: -185px; height: 859px; margin-top: -533px; width: 926px;">
</iframe>
</div>
Here is a Fiddle
How can I achieve this?
It seems like you just need to tweak your inline CSS a bit. For example:
<div style="border: 1px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; width: 675px;">
<iframe scrolling="no" src="http://teamiwatefsu.blogspot.com/2014/09/jsfiddle-demo-div-display-inline-block.html" style="border: 0px none; margin-left: 13px; height: 954px; margin-top: -422px; width: 660px;">
</iframe>
</div>
This appears to match the picture you provided.
I changed the margin-left, margin-top, and width of the iframe. I also changed the div's max-width to a simple width with a different value.
I figured the values for all these using Firebug. I highly recommend familiarizing yourself with browser developer tools such as that (all modern browsers include some kind of "developer tools" these days) that let you play with these things "live" until you find the tweaked CSS you like.
JSFiddle: http://jsfiddle.net/cnmteg76/2/
You can scroll to any portion of a page with a link if the element has an id attrib. IE http://teamiwatefsu.blogspot.com/2014/09/jsfiddle-demo-div-display-inline-block.html#boxB links to boxB scroll position any yes that can be used in as an iframe URL.
div id=post-body-2265336028782673534 is the closest element with an ID attrib. Unfortunately there are 10 br elements under this position and not html element with an ID closer. http://teamiwatefsu.blogspot.com/2014/09/jsfiddle-demo-div-display-inline-block.html#post-body-2265336028782673534
If you can change the source page, place an id attrib in the font tag element (ID="linkanchor"). Link to the page, using the iframe, with a hash tag link ... http://teamiwatefsu.blogspot.com/2014/09/jsfiddle-demo-div-display-inline-block.html#linkanchor
I am building a website that uses Google's Mapping API Embed V1.0, and the coordinates that I specified are showing correctly, however, the point is not in the center of the mapping view.
Photo of Problem:
iFrame Code:
<iframe class="sectionMap" width="300" height="300" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAGJVo8xnxXbEICl5IuDAbmWIBsE0cFKVQ&q=42.3599,-71.0655&zoom=18&maptype=satellite"></iframe>
CSS:
.sectionMap{
/*
width: 300px;
height: 300px;
*/
display: block;
position: relative;
left: 50%;
margin-left: -150px;
border-style: solid;
border-width: 2px;
box-shadow: 1px 1px 5px 3px #ccc;
}
Here is a sample page from the web app:
<section id="williamMonroeTrotterHouse" data-role="page" data-theme="a">
<header data-role="header" data-position="fixed" data-id="appHeader">Back
<h1>William Monroe Trotter House</h1>
</header>
<div data-role="content">
<p><span class="sectionTitle">Location: </span>97 Sawyer Ave., Dorchester</p>
<p><span class="sectionTitle">Description: </span>Home of African-American journalist and Harvard graduate William Monroe Trotter. Trotter publisher The Guardian, and meetings of African-American activists, W. E. B. Du Bois among them, took place at this house.</p>
<img src="Landmark_Photos/WIlliam_Monroe_Trotter_House.jpg" class="sectionPhoto">
<br>
<iframe class="sectionMap" width="300" height="300" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAGJVo8xnxXbEICl5IuDAbmWIBsE0cFKVQ&q=42.3127,-71.0624&zoom=18&maptype=satellite"></iframe>
</div>
</section>
Any ideas why this is not centering?
PS: I don't believe this is a duplicate post, as Google recently updated the mapping api and the answers to previous questions do not work.
A fiddle having exactly you code works fine in my Safari version (5.1.7). Wich version are you having problems with? The only reason I could imagine is the "tricky" centering with position and margin. I'd try margin:0 auto; for centering, without the position relative, top & margin. Or go the old way: display:inline-block inside a div with text-align:center. IMHO this last one is the most cross-browser.
.sectionMapWrapper{
width:100%;
text-align:center;
}
.sectionMap{
display: inline-block;
border-style: solid;
border-width: 2px;
box-shadow: 1px 1px 5px 3px #ccc;
}
EDIT:
If it didn't solve the problem check if you have some kind of library (or your own function) that could make your iframe "display: none".
If it have no layout (display:none) when the content is loaded it's size is 0x0 for the iframe script, and the center is at ... 0/x , 0/x. Keep display block until content is loaded, then you can hide it with display:none.
Under a similar situation I worked around this placing the iframe inside a 0x0 sized div with overflow hidden (at style attribute). When sure of iframe content is loaded fire a function that set the iframe display to none and delete the wrapper div style attribute. (or similar, depending of the additional behaviour you need). Hope it helps.
I have the following div and the native scrolling does not work on it. Is there anything from this code that could possible be caused the scrolling to fail? Or is there something I can add to this to make the scrolling work?
<div id='calvw' style='overflow= hidden;'>
<a id='calevvw' dhx_l_id='#id#' data-ajax='false' href='eventview.php?eventid=#id#'
class='dhx_list_item dhx_list_day_events_time'
style='width:{common.widthSize()}; height:{common.heightSize()};
border-bottom: 1px solid #cbcbcb; padding:{common.padding}px;
margin:{common.margin}px; overflow:hidden;'>
</a>
</div>
If the div you are tying to have scroll is #calvw, this won't work, as you have overflow:hidden on it.
Change the css of that element to:
overflow:scroll;
-webkit-overflow-scrolling:touch;
To enable native, momentum scrolling.
Say I have the following code:
<style>
iframe
{
border:none;
}
div
{
border: 1px solid;
padding: 10px;
}
</style>
<div>
<iframe></iframe>
</div>
If I view this in any modern browser there is no border around the iframe. But If I view it using IE8 or 7 then the border remains. How can I make the border disappear for older, crappier browsers?
I am also having a few other styling issues with the iframe, so bonus points for anyone can provide a good link that goes over cross browser styling of iframes.
You need to add the following to the iFrame. It's can't be done with just CSS for older browsers:
frameborder="0"
I tried to add right scroll in div. This works in most browsers, but not properly when using iPad Safari. Does the iPad not suported this css attribute?
I prepared test html. It do not work too.
<html>
<head>
<style>
.ounner {
border: solid 1px red;
width:300px;
height: 500px;
overflow:scroll ;
}
.inner{
border: solid blue 1px;
height: 700px;
width: 400px;
}
</style>
</head>
<body>
<div class="ounner">
<div class="inner">
sdsd
</div>
</div>
</body>
</html>
overflow: auto and overflow: scroll are supported on MobileSafari, but since scrollbars are not used on iOS, to scroll these areas one must use two fingers.
There is a JavaScript library called iScroll that handles touch events and implements one-finger momentum scrolling manually; perhaps that would be worth looking into.
I have used css:
-webkit-overflow-scrolling: touch;
and scrolling works with 1 finger as well (iPad 2, iOS 5.1.1).
Hope it helps, Filip