<div data-role="page" id="samples">
<div data-role="header" data-position="fixed">Back<h1>Ceremony Planner 2.0 - Samples</h1></div>
<object type="text/html" data="http://www.thereverendmichael.com/ceremony-samples"></object>
</div>
The object scrolls and works fine on all browsers but will not scroll on mobile, it gets cut off and bottom-clipped. Can anyone tell me how I can fix this?
Try this:
First: Make you sure that you put the viewport inside <head> like
<head><meta name=viewport content="width=device-width, initial-scale=1"></head>
Use <iframe> instead <object>
Add a wrapper to the <iframe>and add the following style
html
<div class="wrap">
<iframe src="http://www.thereverendmichael.com/ceremony-samples"></iframe>
</div>
css
.wrap {
// -webkit-overflow-scrolling: touch; Non-standard!
overflow-y: scroll;
}
SOURCE: https://www.w3schools.com/cssref/css3_pr_overflow-y.asp
If it doesn't work uncomment the other style although I see the documentation and is not recommended to use it see here.
However here is working: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe you can see
the style that applies to #iframewrapper watching the view-source (ctrl+u in your browser) and looking for #iframewrapper
Hope this helped you!
Related
Chrome v75 appears to have introduced a bug whereby if you replace an iFrame's src programatically, it will replace the entire page instead of the iFrame.
This didn't happen on v74 and I can't get a test case to work (yet), it just fails in our site. (The site hasn't changed since going from v74 to v75, only Chrome has changed)
It appears to work fine the first time but then when you change it again (in our case viewing report drill downs) it causes the entire page (i.e. the iFrame's Parent) to load the src you were trying to load into the iFrame.
It also doesn't matter if you use pure Javascript or (in our case) JQuery, both cause the same issue.
EDIT: After a few hours detective work, I've found the bug. Setting the tag in the iFrame's content causes Chrome to load the iFrame's content into it's parent rather than the iFrame itself.
I've setup a Plunker account with a demo: https://plnkr.co/edit/UQ0gBY?plnkr=legacy&p=info
Just so I can post the link to Plunker, here is the code for the main file & the iframe content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function onLoaded() {
// find element
let button = document.getElementById("button");
button.addEventListener("click",function(e){
// Add a random number on the end as a cache buster
document.getElementById('frame-finance-custom').src = 'test2.html?rnd=' + Math.random();
},false);
};
document.addEventListener('DOMContentLoaded', onLoaded, false);
</script>
</head>
<body>
<div>IFrame Src Changing Test</div>
<div>
<div id="div-frame-finance-custom" style="float:left;width:33%">
<iframe id="frame-finance-custom" name="frame-finance-custom" class="iframe"
style="border:1px solid black; width: 100%; height: 350px; overflow-y: scroll; vertical-align: top;">
no data
</iframe>
</div>
<div style="float:left;margin-left:1em;">
Detail: Loading an iframe page with a <Base> tag in it with target set to "_parent" will cause any refresh of that frame to replace the parent document<BR>
<BR>Instruction: <UL><LI>Click the 'Update Frame' Button, this will load test2.html into the frame. <LI>Click it again & it will replace the iframe's parent with the content of the iFrame.</UL>
<BR>Confirmation: Remove the <Base> tag from the header of test2.html & reload, it will work as expected.
</div>
</div>
<br clear=both>
<div>
<button id="button">
Update Frame
</button>
</div>
</body>
</html>
IFrame Content (test2.html):
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_parent"/>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>This is the frame content</div>
</body>
</html>
Note, using their new layout it doesn't work, but using their legacy layout it does. Feel free to save the files locally and use chrome directly too.
Ok, so this turned out to be a bug in Chrome rather than anything else, so yes, strictly not a SO question, but seeing as SO ranks so well in Google (other search engines are available), I thought it better to leave it here as a solution rather than simply delete it, just incase anyone else has a similar problem.
The reason is outlined as an edit in my question, the solution is to remove the <base target="_parent"> tag from the iFrame and programatically add the 'target="_parent"' attribute to any links in the iFrame.
We do this via jQuery, I'm sure its just as easy via vanilla Javascript.
$('a').attr('target','_parent');
Add that to the javascript that runs when a page has loaded and it'll replace add target="_parent" to any links on the page.
e.g.
<script>
function onLoaded() {
// find all links and add the target attribute
$('a').attr('target','_parent');
};
document.addEventListener('DOMContentLoaded', onLoaded, false);
</script>
As #Kaiido says in his comment, its apparently fixed in Chrome v77, but this isn't the current (as of June 2019) stable release, so we've had to add the workaround into production so that our CRM works with Chrome v75. Thanks to #Kaiido for confirming that.
Hey fellas and ladies,
I'm having an issue applying the following css rule.
$('#bam').css({"-webkit-overflow-scrolling": "touch"})
Is applying -webkit stuff supported in jquery being a nonstandard rule? When I apply nothing happens and no error occurs.
However if I do the the same syntax and change color it works.
As a use case im trying to fix an issue with an iphone iframe overflow problem see iframe size with CSS on iOS for my current issue and Im not in a position to use inline styles or external css.
Any ideas :)?
Added jsbin example.
https://jsbin.com/vizacezeva/edit?html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$( document ).ready(function() {
$('#bam').css({"overflow-scrolling": "touch"})
console.log('hi');
console.log($('#bam').css("overflow-scrolling"));
});
</script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="bam" style="width:100%; padding:0px;">
<iframe src="http://www.jsbin.com" style="width:1px; min-width:100%; max-width:100%;">
</iframe>
</div>
</body>
</html>
Instead of adding the CSS rule with jQuery you can declare a rule in your CSS file and add a class which applies the style.
/** style.css **/
.foo { -webkit-overflow-scrolling: touch; }
// app.js
$('#bam').addClass('foo');
take a look at this site www.naamdesigns.com
view this site with desktop and also with mobile. In mobile, the header div in blue does not fit the screen entirely, it covers only 50%.
why this problem occur?
Why did you set overflow-x: hidden; on body tag? I guess on mobile 100% width is only the visible part, where the whole content doesn't fit, but just half of it.
lets try to put this in your head tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Added :
this is my idea, i dont know it's would works. Lets make a container to wrap all yor contents.
<body>
<div id="wrapper" style="width:100%">
<div id="your_header"style="width:100%"></div>
<div id="your_body" style="width:100%"></div>
</div>
</body>
I am having problem loading my application page with dojo 1.9 in IE8. It works flawlessly from IE9 onwards and on firefox as well as chrome.
The error thrown in console is "LOG: Exception in Callback: Error: Member not found" and sometimes " 'mid' is null or not an object " and the page stops rendering.
The HTML is:
<!DOCTYPE html>
<html>
<head>
<style> #import "../../../Scripts/dojolib/release/dijit/themes/claro/claro.css"; #import "../../../Scripts/dojolib/release/dijit/themes/dijit.css"; #import "../../../Scripts/dojolib/release/dgrid/css/dgrid.css"; </style><style type="text/css"> body { autofocus:false; } </style><meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title>XYZ</title>
<link rel="stylesheet" href="../css/app-min.css">
<link rel="stylesheet" href="../css/systemsettings.css" />
<link rel="stylesheet" href="../css/pageLayout.css">
<link rel="stylesheet" href="../css/X420_style.css">
<script src='../../../Scripts/gw-app-config.js'></script><script src='../../../Scripts/dojolib/release/dojo/dojo.js'></script><script src='../scripts/gw-app.js'></script></head>
<body class="claro" >
<div id="maincontainer" class="container" style="width:1200px; margin: 0 auto; overflow: hidden; display: block;">
<div id="body" class="row">
<div class="wrapper">
<div id="topBanner" data-dojo-type = "dijit/layout/ContentPane"></div>
<div id="topMenu" data-dojo-type = "dijit/layout/ContentPane"></div>
<div id="content" data-dojo-type = "dijit/layout/ContentPane"></div>
<div id="footer" data-dojo-type = "dijit/layout/ContentPane"></div>
</div>
</div>
</div>
</body>
</html>
Please tell me what can possibly go wrong in IE8 and how can I debug this issue?
Even though you have posted what looks like the whole page, it's impossible to test as we don't know where is e.g. dojoConfig specified. I believe it's in gw-app-config.js file, but what else is in there?
In regards of your problem, the first thing I've noticed is that your meta tags are not on top of hierarchy, they should be right after the head tag. That would be the first advice to test.
Please see this link and the second answer, that might not be the same problem as yours, but similar
X-UA-Compatible is set to IE=edge, but it still doesn't stop Compatibility Mode
I solved this after a lot of debugging in the same way belzebu had highlighted. IE8 broke on each and every Dojo statement in which Dojo was applying CSS styling for IE8 unsupported CSS fields (like background, linear gradient).
I also eliminated use of dom.byId() and used style.set()
I also replaced CSS with the one supported by IE8 and other browsers.
I've encountered a problem with Flexslider on iOS devices that seems similar to the problem reported in this unanswered question. Slideshows with images of different aspect ratios display properly on OSX Safari and all other browsers I've tried (even IE8), but not on iOS 5 or 6 using Safari or Chrome. The problem occurs on both iPhone and iPad.
I first noticed this in a large responsive portfolio site I'm building for a client and thought it might be related to the unusual configuration including pulling the slider in using Ajax. As it turns out I was able to reduce it to a simple example. Here are screen shots of the example in iOS and OSX Safari.
The example is very simple and uses jQuery 1.10.1 and jQuery.flexslider 2.1. You can find a working example on my website. Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" id="viewport" content="initial-scale=1.0, width=device-width" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.flexslider.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
controlNav:true,
animationLoop: true,
slideshowSpeed:2000
});
});
</script>
<link rel="stylesheet" href="flexslider.css" />
<style type="text/css">
#example{
width:100%;
height:auto;
max-width:400px;
background-color:#f0f0f0;
}
</style>
</head>
<body>
<h1>Flexslider iOS bug example</h1>
<section id="example">
<div class="flexslider">
<ul class="slides">
<li><img src="tallslide.jpg"></li>
<li><img src="wideslide.jpg"></li>
</ul>
</div>
<p>Text after slider</p>
</section>
</body>
</html>
I've tried numerous CSS adjustments such as changing the images to display:inline, and messing with margins and padding. None of those made it any better.
My question is:
How do you make Flexslider display short slides properly on iOS or do you know of a slider that works well in responsive sites with slides of different aspect ratios?
It doesn't look like it's currently possible with what Flexslider provides. My best alternative was to use BXSlider which has an adaptiveHeightoption.
If your images are all different sizes than what you need to is set the height of the container to a fixed value and set the content to be overflow:hidden;
Something like
.flexslider {
height: 300px;
overflow: hidden;
}
You could include a series of media queries based on the height of the viewport to adjust that height over a range of heights.
Something like that?! Customized according to your example ;) (flexslider 2.1 tested)
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
controlNav:true,
animationLoop: true,
slideshowSpeed:2000,
after: function(slider){
$(this).height( $(this).find('.slides > li').eq(slider.currentSlide).height() );
}
});
});
From my previous answer to this stackoverflow question https://stackoverflow.com/a/21491781/3259159