Overflow div on iPad doesn't work properly
Question
I've got an iPhone app and an iPad app, both running the same web code inside a UIWebView. The web code is a call to a PHP page to get some HTML + Javascript to the mobile and display it inside a frame. The purpose of this code is to interact with a chat server.
The HTML includes a DIV:
<div id="messageContainer" style="width: 768; height: 310; border: 1px solid black; background-color: black; color: white; font-size: 14px; overflow: auto; -webkit-overflow-scrolling:touch">
</div>
When the javascript code gets a line of data from the server, it simply adds it to the div:
function addPost(data) {
var e = document.getElementById("messageContainer");
var post;
if (typeof(data) == "object")
{
post = "<div dir='ltr'><span style='color: rgb(183,226,76)' >" +
data.displayName + "</span>‎: " +
"<span >" + data.msg + "</span><BR/></div>";
} else {
post = data + "<BR/>";
}
e.innerHTML = post;
e.scrollTop = e.scrollHeight;
}
So the text in the div is scrolled to keep in view.
Both iPhone and iPad are running iOS 5.
The application works perfectly on the iPhone!
However, on the iPad, aafter about 20-25 lines of data, the div no longer displays new text. I checked the value of innerHTML, and it does indeed include the new text. It just refuses to display it. I can scroll the text in that case, but can't add new text that will show.
I've read several posts about problems with scrolling and innerHTML on iPad, but none of the suggested solutions helped.
Any idea on what might be wrong would greatly appreciated!
Thx
Ofer
UPDATE #1:
The HTML body is:
<body style="margin: 0px; height: <?=$chatWindowHeight?>;">
<div id="messageContainer" style="width: <?=$chatWindowWidth?>; height: <?=$chatWindowHeight?>; border: 1px solid black; background-color: black; color: white; font-size: 14px; overflow: auto; -webkit-overflow-scrolling:touch">
</div>
<IFRAME name="chatwindow2" id="chatwindow2" FRAMEBORDER="0" SCROLLING="NO" WIDTH="0" HEIGHT="0" src="ConnectToChat.php">Browser does not support iframes!</IFRAME>
</body>
4 answers
solution1
0 2012-03-17 02:22:22
尝试使主div的高度和宽度不固定，例如：
<div id="messageContainer" style="width: 100%; height: 20%; border: 1px solid black; background-color: black; color: white; font-size: 14px; overflow: auto; -webkit-overflow-scrolling:touch">
solution2
0 2012-03-17 03:50:23
For starters this is not the ideal way to manipulate the HTML of your page using the DOM tree and .createelement will be much easier for you. As for the over flow as far as i am aware provided your running the same iOS version on both devices they will be running the same version of web kit so try increasing the div size and check the overflow property to make sure the div boundaries are not hiding content. This is most likely a screen resolution or personalisation issue (default text sizes etc.) also if you are layering divs increase the z-index property to make sure you dont have other divs sitting on top of it. If you post the full CSS and HTML here it may be easier to take a look at in more specifics.
Good Luck.
solution3
0 2012-03-17 04:30:41
I would try this intermediary step to see if not hitting the actual elements in flow directly with innerHTML solves the problem:
var innerHolder = document.createElement('div');
//not sure why you needed dir='ltr' but I'll let you setAttribute that if it's important
var post = "<span style='color: rgb(183,226,76)' >" +
data.displayName + "</span>‎: " +
"<span >" + data.msg + "</span><BR/>"
innerHolder.innerHTML = post;
innerHolder = document.createDocumentFramgement().appendChild(innerHolder);
//Now innerHTML has been handled on an object that isn't affecting flow yet.
while (e.firstChild) { //empty e out
e.removeChild(element.firstChild);
}
e.appendChild(innerHolder);
solution4
0 ACCPTED 2012-03-20 10:32:01
Just for the record, it turned out that the issue was in the iPad application and the way it implemented scrolling (I don't own that code, just the web part). Once the owner fixed the app, things started working as expected.
Anyway, thanks to all who answered my question, much appreciated!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.