Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.01.2019, 20:15
Интересующийся
Отправить личное сообщение для web-master Посмотреть профиль Найти все сообщения от web-master
 
Регистрация: 17.02.2014
Сообщений: 15

Шаблонизатор Twig мешает работе плагинов Jquerymobile
Добрый день
В проекте необходимо использование шаблонизатора 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 %}
Изображения:
Тип файла: jpg проблема.jpg (10.7 Кб, 3 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 09.01.2019, 21:43
Интересующийся
Отправить личное сообщение для web-master Посмотреть профиль Найти все сообщения от web-master
 
Регистрация: 17.02.2014
Сообщений: 15

Разобрался, были невидимые символы перед элементами
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Гуру JS подскажите что мешает работе скрипта Donso Общие вопросы Javascript 1 05.03.2017 17:03
WebVisor - мешает нормальной работе Gvozd Сайт Javascript.ru 3 01.10.2010 00:06