Переполнение div на iPad не работает должным образом - PullRequest
Новая
       0

Переполнение div на iPad не работает должным образом

0 голосов
/ 17 марта 2012

У меня есть приложение для iPhone и приложение для iPad, оба из которых выполняют один и тот же веб-код внутри UIWebView.Веб-код - это вызов страницы PHP, чтобы получить HTML + Javascript на мобильный телефон и отобразить его во фрейме.Целью этого кода является взаимодействие с сервером чата.

HTML включает в себя 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>

Когда код JavaScript получает строку данных с сервера, он просто добавляетэто в 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>&lrm;: " + 
                "<span >" + data.msg + "</span><BR/></div>";
    } else {
        post = data + "<BR/>";
    }

    e.innerHTML = post;
    e.scrollTop = e.scrollHeight;
}

Таким образом, текст в div прокручивается для просмотра.

И iPhone, и iPad работают под управлением iOS 5.

Приложение отлично работает на iPhone!

Однако на iPad, после 20-25 строк данных, div больше не отображает новый текст.Я проверил значение innerHTML, и оно действительно включает новый текст.Он просто отказывается отображать это.В этом случае я могу прокрутить текст, но не могу добавить новый текст, который будет отображаться.

Я прочитал несколько сообщений о проблемах с прокруткой и innerHTML на iPad, но ни одно из предложенных решений не помогло.

Любая идея о том, что может быть не так, будет с благодарностью!

Thx

Ofer

UPDATE # 1:

Тело HTML: 

<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 ]

0 голосов
/ 20 марта 2012

Просто для протокола, выяснилось, что проблема была в приложении для iPad и в способе реализации прокрутки (мне не принадлежит этот код, только веб-часть).Как только владелец исправил приложение, все стало работать как положено.

В любом случае, спасибо всем, кто ответил на мой вопрос, очень признателен!

0 голосов
/ 17 марта 2012

Для начала, это не идеальный способ манипулировать HTML-кодом вашей страницы с помощью дерева DOM, и .createelement будет для вас намного проще.Что касается переполнения, насколько я знаю, при условии, что вы используете одну и ту же версию iOS на обоих устройствах, они будут использовать одну и ту же версию веб-набора, поэтому попробуйте увеличить размер div и проверить свойство переполнения, чтобы убедиться, что границы div нескрытие контента.Это, скорее всего, проблема с разрешением экрана или персонализацией (размеры текста по умолчанию и т. Д.), Также если вы разделяете элементы div, увеличьте свойство z-index, чтобы убедиться, что у вас нет других элементов div, расположенных поверх него.Если вы разместите здесь полный CSS и HTML, вам будет проще взглянуть на более подробно.

Удачи.

0 голосов
/ 17 марта 2012

Я бы попробовал этот промежуточный шаг, чтобы увидеть, решит ли проблема попадание в элементы непосредственно в потоке с помощью innerHTML: 

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>&lrm;: " + 
                "<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);
0 голосов
/ 17 марта 2012

Попробуйте сделать фиксированную высоту и ширину основного 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">

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...