I was aware of multiple scrolling libraries (TouchScroll, iScroll) for the iPhone/iOS due to its inability (???) to support overflow:scroll . However, I was not aware (and I am looking for confirmation) that IFRAMEs don't really work either. It appears that the iframe doesn't respect any attempt to give it a fixed size and always just resizes itself to its content. Am I correct on this? Is the only way to scroll an IFRAME to place it inside a block element with the overflow CSS property set and then to use a lib like the aforementioned?
simply adding...
overflow-y:auto;
-webkit-overflow-scrolling:touch;
to a div around my iframe worked for me
You can scroll any content which is set to overflow:auto by touching with two fingers and dragging. Don't put iFrame inside a div with overflow:auto, and instead set the iframe to overflow:auto itself. Unfortunately, iframe scrolling is very choppy, regardless of content or device, so the best solution is to find a way to make your content fit into one long page, with "top" & "bottom" view divs set to follow the viewport (if this is the effect you're going for.)
Have you given Joe Hewitt's Scrollability library a go?
You can read more about it here:
Scrollability, New iOS Physics Project from Facebook for iPhone Creator, Joe Hewitt
Hope this helps.
The code below works for me (thanks to Christopher Zimmermann for his blog post http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/). The problems are:
1. There are no scroll bars to let the user know that they can scroll
2. Users have to use two-finger scrolling
3. The PDF files are not centered (still working on it)
<!DOCTYPE HTML>
<html>
<head>
<title>Testing iFrames on iPad</title>
<style>
div {
border: solid 1px green;
height:100px;
}
.scroller{
border:solid 1px #66AA66;
height: 400px;
width: 400px;
overflow: auto;
text-align:center;
}
</style>
</head>
<body>
<table>
<tr>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
</tr>
<tr>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
<td><div class="scroller">
<iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
</div>
</td>
</tr>
</table>
<div> Here are some additional contents.</div>
</body>
</html>
Flippant answer: don't use IFRAMES anymore.
Related
I have a HTML email designed in tables to support older email clients. I am using sendgrid so the image value is displayed using an {{#each}}
This works fine on most newer clients and browsers but on Mac Mail and Outlook up to 2016 the main image does not show the first time you view the email. If you view another email in your inbox and go back to that one it magically appears. Also once its cached it will appear every time.
This is how I am displaying the image.
<td class="img-container">
<a href="linkToSomewhere.html" style="text-decoration: none;">
{{#if this.hasPhoto}}
<img class="hero-img" alt="{{this.altText}}" src="https://somePlatform.xyz{{this.photoUrl}}.jpg" width="560" height="380" style="display: block; width: 560px; height: 100%;" />
{{/if}}
</a>
</td>
Im adding this here because I couldnt find any way to solve this by searching. I hope this helps you. To solve this weird bug you need to reserve the space in your HTML for the img. You can do that with a width and height style on the td
<td class="img-container" style="width: 100%; height: 380px;">
<a href="linkToSomewhere.html" style="text-decoration: none;">
{{#if this.hasPhoto}}
<img class="hero-img" alt="{{this.altText}}" src="https://somePlatform.xyz{{this.photoUrl}}.jpg" width="560" height="380" style="display: block; width: 560px; height: 100%;" />
{{/if}}
</a>
</td>
I have a GWT app with one main panel showing a table of PostgreSQL instances. I want the app to show other kinds of instances, e.g. Redis instances. So I'm initially wrapping the main panel in a DeckLayoutPanel to swap out the PostgreSQL panel with a Redis panel. There will a vertical menu on the left side that the user will use to select the type of instance to show.
Adding DeckLayoutPanel to the UI XML causes the main panel to not display, although I do see the content in a DOM inspector.
Here's the original, working UI, without g:DeckLayoutPanel:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder
xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:HTMLPanel>
<table width="100%" border="1">
<tr>
<td colspan="2" align="left">
Logo
</td>
<td colspan="2" align="right">
Hello John
</td>
</tr>
<tr>
<td colspan="4">
<g:VerticalPanel ui:field="instancesPanel">
<g:Label ui:field="mainErrorLabel" />
<g:FlexTable ui:field="flexTable" />
<g:HorizontalPanel>
<g:TextBox ui:field="createInstanceTextBox" />
<g:ListBox ui:field="createInstanceVersionsListBox" />
<g:Button ui:field="createInstanceButton">Create</g:Button>
<g:Label ui:field="createInstanceErrorLabel" />
</g:HorizontalPanel>
</g:VerticalPanel>
</td>
</tr>
<tr>
<td>Help</td>
<td>About</td>
<td>Contact</td>
</tr>
</table>
</g:HTMLPanel>
</ui:UiBinder>
If I remove the g:HTMLPanel and also the HTML table, trimming it to, this works:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder
xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:DeckLayoutPanel ui:field="deckLayoutPanel">
<g:VerticalPanel ui:field="instancesPanel">
<g:Label ui:field="mainErrorLabel" />
<g:FlexTable ui:field="flexTable" />
<g:HorizontalPanel>
<g:TextBox ui:field="createInstanceTextBox" />
<g:ListBox ui:field="createInstanceVersionsListBox" />
<g:Button ui:field="createInstanceButton">Create</g:Button>
<g:Label ui:field="createInstanceErrorLabel" />
</g:HorizontalPanel>
</g:VerticalPanel>
</g:DeckLayoutPanel>
</ui:UiBinder>
I'm using an HTML table here since I'm not a front-end designer and I have similar HTML for the non-GWT JSP pages (using a JSTL tag) so want to make sure the GWT and non-GWT pages render the same.
Should I be using something else than a table? Should I switch to divs for placement instead? Is using a g:DeckLayoutPanel in an HTML table not supported? How is one supposed to get identical HTML pages for GWT and non-GWT pages if one needs to use only GWT layout widgets?
BTW, I tried using RootPanel and that didn't work either with the HTML page.
I'm binding to it using:
interface Binder extends UiBinder<HTMLPanel, MyWebApp> { }
private static final Binder binder = GWT.create(Binder.class);
#UiField
DeckLayoutPanel deckLayoutPanel;
#UiField
VerticalPanel instancesPanel;
#Override
public void onModuleLoad() {
HTMLPanel outer = binder.createAndBindUi(this);
// Tweak a bunch of settings on the UI elements.
...
RootLayoutPanel.get().add(outer);
deckLayoutPanel.showWidget(instancesPanel);
}
The HTML hosting the page is this:
<!doctype html>
<%# page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
<link type="text/css" rel="stylesheet" href="MyWebApp.css">
<title>MyWebApp</title>
<script type="text/javascript" language="javascript" src="MyWebApp/MyWebApp.nocache.js"></script>
</head>
<body>
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
</body>
</html>
DeckLayoutPanel in a HTMLPanel
The problem is part of the title...
The short answer is: Do not nest **LayoutPanels in anything other than a **LayoutPanel unless you set a fixed size for it.
**LayoutPanels are meant for applications that that have a static layout that is defined from the outer to the inner. If you only user **LayoutPanels for the outer layout, it works. In your second code example you noticed exactly this behavior.
A html table works different, it needs it's content to define a size and grow with it. As **LayoutPanels do not grow with their contents, they have a size of 0x0px.
I answered a similar question lately (link). Possibly it answers different aspects of this problem.
I am creating an ordered list within a webview and I want to remove the indentation from the list, i.e. have the list aligned with the first paragraph. Here's HTML:
<body style="font-family: arial""font-size:18">
<p>First paragraph.</p>
<p>
<ol style="margin-left:0px">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ol>
</p>
</body>
Notice that with the margin-left:0px, the webview still indents the list by about 17 points. If I say margin-left:-17px, I can make it work with a hack but would rather not as it seems more like I'm doing something wrong with the construction of my HTML.
Can anyone see any problems with it?
Updated HTML - Still doesn't work:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-family: arial;
font-size: 18px;
}
ol {
padding-left: 0px;
}
</style>
</head>
<body>
<p>Paragraph.</p>
<p>
<ol>
<li>List item 1.</li>
<li>List item 2.</li>
<li>List item 3.</li>
</ol>
</p>
</body>
</html>
I'm using iOS 5.1 on iPhone 3GS
You can archive style like that with :
ol {
list-style-type: none;
margin: 0;
padding: 0;
}
Try This....
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
font-family: arial;
font-size: 18px;
}
.flush-left {
padding-left: 25px;
}
</style>
</head>
<body>
<p>First paragraph.</p>
<p>
<ol class="flush-left">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ol>
</p>
</body>
</html>
A couple of other pointers. Test your stuff out in test files in html on your desktop and load them into Safari and the iOS Simulator (Drag html file onto safari open in simulator).
But then you can use Regular Safari Debug tools to examine the html and css. or Firebug in Firefox.
Also, when in doubt www.w3schools.com ... :)
Perhaps I'm a bit late for your needs – I just came across this.
I only noticed this on my iPhone, and not my iPad, nor Safari on the Mac. I found that a bit strange that this issue would only be in the one version of Safari, and not all. I wasn't happening in Chrome either.
When looking in the Chrome developer tools, I noticed that the user agent stylesheet had added a number of -webkit prefixed styles, all to do with margin and padding:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
When I first saw that, I was wondering if that was the issue, but, it was late, and I had to take a sleep break. Today, I tackled it again, but forgot about these styles. I looked around, and came across #Remover's question. But, setting a specific pixel-based margin or padding didn't sit well with me.
At some point, I decided to narrow my browser window in Chrome, and low and behold the issue was there as well, only when I narrowed it to be close to the width of an iPhone. So, this isn't just an iOS issue. It's webkit.
I looked again at the styles in the dev tools, and saw again the -webkit styles, and the 40px on -webkit-padding-start. I played around with my css, and that was indeed the culprit.
I then added the following to my stylesheet:
ol {
-webkit-padding-start: 2em;
-ms-padding-start: 2em;
-moz-padding-start: 2em;
-o-padding-start: 2em;
padding-start: 2em;
}
I did some quick research, and it looks like only -webkit and -moz are using padding-start, but I added the rest, just in case they pick it up – though, now that Opera has switched to webkit, -o probably isn't needed.
In my case, I used 2em, as that worked with my style. Not sure if 2em will work across the board or not.
Edit
I should have also mentioned that it probably only shows up on small screens because it's set at 40px. In my design, my base font-size at full screen is 23px, and at 480px and below is 10px, which is quite a bit of a difference.
If you merely assign a padding of zero, the bullets go off the screen. I found that the following worked perfectly for my webview
ul,ol {padding-left: 20px;}
li {padding-left:2px;}
isn't it
<ul><li></li></ul>
not <ol> ?
also it looks the you might have a syntax error on your style for your body tag
:)
~ Dan
I don't usually deal in exclamation points, but I have hours before this goes live. I have the following page full of FBML for a Facebook tab on a product page:
<fb:fbml version="1.1">
<div id="container" style="width: 520px;">
<fb:visible-to-connection>
<div>
Yay!
<a href="{link}" style="border: 0; display:inline-block;">
<img src="{image link}" style="border: none;" />
</a>
</div>
<fb:else>
<div>
<img src="{image link}" style="border: none;" />
</div>
</fb:else>
</fb:visible-to-connection>
<div class="{a css class I have to censor}">
<img src="{image link}" />
<p class="nopurchase" style="font-family: 'Trebuchet MS Gothic', Arial; font-size: 10px;">
some text.
Click for something.</p>
</div>
</div>
</fb:fbml>
Basically it's a fan gate. To get past it the user has to like the page it resides on. It parses and renders, but for whatever reason both conditions (the div for fans, and the one for non-fans) are drawn. I have no idea why fb:visible-to-connection isn't doing this.
The answer is simple. If you are an admin of the application you are using, visible-to-connection will show you everything, regardless whether you're a fan or not. Normal users will see the expected functionality.
Yep, if you are an admin you get the trap all the time. If you go to the page with an account that is not an admin you can like the page and then see the content as expected. Thanks
Go to ACCOUNT on the top right of your screen
Click USE FACEBOOK AS PAGE
Select another page, then check your functionality - this should work
The following markup when viewed in Safari on Iphone and Ipad displays the body background color for 1 pixel between the two tables. What is this and how do I stop it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{
background:#000;
}
table{
background:#ffffff;
width:50px;
border:0;
margin:0;
padding:0;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>a</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>b</td>
</tr>
</table>
</body>
</html>
I've taken the liberty of dumping your markup to a file on my server:
Original markup
Alternative markup
There is no actual gap on my iPhone, but... the resizing algorithm does leave some space between the tables from time to time while zooming in/out.
This almost certainly has to do with some math not perfectly aligning to the pixel and getting rounded to match the nearest horizontal line. There is not much you can realy do about this, unless you resort to surrounding the tables with an inline-block that has the same background-color set like in the alternate file linked above.
On my iPhone the alternate version never displays any black lines between the tables. Be aware though that now the next element will be next to the inline-blocked div instead of underneath the tables. I'll leave solving that upto the reader. hint: css clear attribute.
Humm.. Have you updated Safari?
On Safari 5 I have no issue with this html...