Добрый день
В проекте необходимо использование шаблонизатора Twig и Jquerymobile.
Но выяснилась одна проблема, при вставке на страницу каких либо списочных плагинов Jquerymobile, происходит их разрыв (как на скриншоте) это плагин listview.
Опытным путем выяснил что это происходит из-за блочных элементов Twig {% block content %}{% endblock %} и прочих, если на странице которая выводится этими блоками присутствуют эти плагины Jquerymobile
Проверял на многих браузерах, кодировку страниц менял, пока ничего не помогает
Не отказываться же от Twig ради Jquerymobile или наоборот.
Кто чем может помочь?
base.html шаблона
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ HOST }}/include/jquerymobile/jquery.mobile-1.4.5.css">
<link rel="stylesheet" href="{{ HOST }}/include/css/style.css">
<script src="{{ HOST }}/include/jquery/jquery.js"></script>
<script src="{{ HOST }}/include/jquerymobile/jquery.mobile-1.4.5.js"></script>
<script type="text/javascript">
$(function() {
$.mobile.page.prototype.options.domCache = false;
});
</script>
</head>
<body>
<div data-role="page" class="my-page">
<div data-role="panel" data-display="overlay" id="my-panel">
<div data-role="header"><h1>Меню</h1></div>
</div>
<div data-role="header" data-position="fixed" class="ui-title">
<h1>{% block title %}{% endblock %}</h1>
<a href="#my-panel" >Меню</a>
</div>
<div role="main" class="ui-content">
{% block content %}{% endblock %}
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Ниже страница которая выводится {% block content %}{% endblock %} на которой проблемные элементы
{% extends "base.html" %}
{% block title %}{% endblock %}
{% block content %}
<div class="ui-body ui-body-a ui-corner-all">
<p>Картинка</p>
</div>
<ul data-role="listview" data-inset="true" data-divider-theme="a">
<li data-role="list-divider">Mail</li>
<li><a href="#">Inbox</a></li>
<li><a href="#">Outbox</a></li>
<li data-role="list-divider">Contacts</li>
<li><a href="#">Friends</a></li>
<li><a href="#">Work</a></li>
</ul>
{% endblock %}