Create new blank trigger.io project. when preview it by "mobile" (in iphone emlulator) its fine. then add preview button in chrome. when click that button preview window show
http://www.imagehosting.cz/?v=screengeg.png but too narrow.
running on macos, triggertoolkit and chrome both in actual stable version.
any ideas?
Try adding a "width" attribute in your popup markup:
<style type="text/css">
html {
width: 500px;
}
</style>
Related
I have an iframe which contains a form. Everything works fine in desktop and android devices and also in iPads. But in case of iphone 8+ and iphone 7, iOS - 11.3, the moment I start typing inside any field - text field or textarea in this iframe, the page is scrolled to the bottom automatically, so the user is not able to see the data he/ she is entering in the field. This is happening for both Safari and chrome in iOS. iframe is initialised as follows:
<iframe ng-src="myUrl" ng-if="model.seat.survey_url" width="100%" height="100%" border="0" style="border-style: none; height:100%;overflow:hidden;width: 100%;" scrolling="no"></iframe>
This iframe is loaded inside the bootstrap modal and angularjs has been used.
Try the adding the following CSS to the parent page if you are able, it fixed the same issue for me.
html, body {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
I can't seem to figure out why I am having issues with an embedded PDF in a simple HTML page on ONLY iOS devices (iPad/iPhone). Android and PC are fine. On iOS devices it renders the PDF on the page as what appears to be a PNG file. It only renders the first page of the PDF. Scrolling doesn't work, neither does tap and hold. The browser doesn't see it as a PDF. I've tried:
<object data='edoc.pdf'
type='application/pdf'
width='100%'
height='700px'>
</object>
Even tried an iFrame/DIV and while I can get the frame to scroll, it's only when I shrink the frame smaller than the "pdf" is renderd and it simply scrolls the single image around.
<style type="text/css">
.scroll-wrapper {
display: inline-block;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
.scroll-wrapper, .scroll-wrapper {
width: 400px;
height: 400px;
}
</style>
<div class="scroll-wrapper">
<iframe src="edoc.pdf" id="test" ></iframe>
</div>
I'm at a loss. My application needs to use an embedded PDF but I need to figure out why the iOS devices are such a hassle. This behavior has been repeated on Safari, Chrome, Firefox. On iPhone and iPad. Version has been consistently iOS 10+. I've checked the web server mime type is setup properly for PDF. I've tried multiple PDF's from multiple locations.
Linking to the PDF
<a href='edoc.pdf'>PDF Name</a>
Works just fine. I'm lost. Help.
Any help is welcome.
I have an xcode project with html files. I am embedding a google doc using an iframe, but when I run the simulator, the width overflows on the right for iphone 6 and larger. It looks fine on iphone 5.
I've tried to change the margins in google docs and attempted some styling of the iframe.
iframe {
width: 100%;
display: block;
}
<iframe src="thesrc"></iframe>
I have also tried to embed it a container, but that didn't work either. I'm not sure if it's a css issue or I can't get a responsive iframe within xcode. Again, seems to be working fine on iphone 5.
If I understood your question correctly, I think you need to provide the correct media CSS rules. I don't know though if you can this in the external html of an iframe.
to perform media queries, you can do something like
#media screen and (min-width:500px) {
body {
margin: 0 auto;
width: 768px;
}
}
I tested my website application on both my iOS devices and my Windows PC, along with the Google Chrome device toolbar. Any fixed elements inside the iFrame are fixed when using the website application on my Windows PC and Google Chrome device toolbar. However, any fixed elements inside the iFrame are not fixed on iOS devices. Apparently this could be a bug that iOS devices have and was wondering if there is a solution so that elements that are suppose to be in a fixed position are actually fixed on iOS devices. Here is the CSS code I have:
/* Div that contains the iFrame */
#interactWithNav {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
-webkit-filter: blur(5px);
filter: blur(5px);
display: table;
text-align: center;
}
/* iFrame that loads the page with the fixed elements */
#interactWithNavFrame {
border: 0;
width: 100%;
height: 100%;
}
If it were me, I would create a targeted test to prove these theories and show them.
I'd make a mini website with a fixed position element, and an absolute element (for good measure)
http://codepen.io/sheriffderek/pen/xqaYqM
Then I would make another mini website with an iframe of the source of that previous website example(in this case the debug CodePen version) http://s.codepen.io/sheriffderek/debug/xqaYqM
http://codepen.io/sheriffderek/pen/GWXQBN
Send this link to your phone:
http://s.codepen.io/sheriffderek/debug/GWXQBN
Then I'd use the debug version of that to test on the iPhone or whatever.
<header>
<h1>iFrame example with fixed position and absolute position to check on iOS and other devices</h1>
header....
<div class='fixed-thing'>fixed-thing</div>
</header>
<main>
main
<div class='absolute-thing'>absolute-thing</div>
</main>
and then...
<main>
<iframe src='http://s.codepen.io/sheriffderek/debug/xqaYqM' frameborder='0'></iframe>
</main>
Everything seems normal to me.
Can this help you explain the issue a bit more? Are you using any transform: translate in your code? Why are you positioning the iframe in an absolute container?
It appears that the iFrame is automatically full height on iOS no matter what you set it to, so no scrolling, which means fixed wouldn't even be detectable... See this thread: How to get an IFrame to be responsive in iOS Safari?
I am making a hybrid app, in which I have a left panel. On opening the left panel my page turns black. I am facing this problem only in windows phone 8. Panels work properly on android devices. Is there a problem with Windows support for jQuery Mobile?
I have an image for the menu button. onclick event of this image i have called a javascript function. the javascript function is as follows
<img src="images/leftnav_icon.png" id="leftnavImage" onclick="OpenLeftPanel()"/>
function OpenLeftPanel() {
$('#myPanel ul').listview();
$('#myPanel ul').listview('refresh');
$("#myPanel").panel("open");
}
How about just opening the panel th default way like described in the docs
<a href="#[your_panel_id]" data-rel="panel">
<img src="..." />
</a>
The data-rel should be optional. To run your listview-foo, bind to panelbeforeopen and run your stuff then (described on the same link as above).
Thank you all for your help. I got this problem solved. I just added a footer to all my pages and the left panel works fine now! CSS for footer is
#yourFooterId{
position: absolute;
bottom: 0px;
width: 100%;
height: 1px;
opacity: 0;
}