Плагин Buildfire: метафайм disableTheme блокирует прокрутку - PullRequest
Новая
       23

Плагин Buildfire: метафайм disableTheme блокирует прокрутку

0 голосов
/ 03 декабря 2018

Я добавил <meta name="buildfire" content="disableTheme"> в HTML моего плагина Buildfire.Это действительно отключило тему CSS, однако теперь она также препятствует нормальной прокрутке страницы.Это простой плагин HTML / CSS / JS без внешних каркасов.Это для виджета.Использование BuildFireSDK версии 1.15.3

Прокрутка корректно работает в моей локальной среде в тестере плагинов.Но он работает неправильно, когда плагин загружается в панель управления пользователя или когда на устройство загружается тестовое приложение.

Есть ли способ отключить стилизацию темы, но разрешить нормальную прокрутку?

Редактировать: я удалил все дополнительные классы, стили и теги сценариев из HTML.Он все еще не прокручивается. 

<html>
<head>
    <meta name="buildfire" content="disableTheme">
    <title>Test</title>
    <script src="../../../scripts/buildfire.js"></script>
</head>
<body style="overflow-y:scroll;">
    <div style="overflow-y:scroll;">
        <div class="container" style="overflow-y:scroll;">
            <div>
                <div>
                    <h1>Test</h1>
                </div>
            </div>
            <div>
                <div>
                    <form>
                        <div>
                            <div>
                                <h2>Test</h2>
                            </div>
                        </div>
                        <div>
                            <div>
                                <h2>Test</h2>
                            </div>
                        </div>
                        <div>
                            <div>
                                <h2>Test</h2>
                            </div>
                        </div>
                        <div>
                            <div>
                                <h2>Test</h2>
                            </div>
                        </div>
                        <div>
                            <div>
                                <h2>Test</h2>
                            </div>
                        </div>
                        <div>
                            <div>
                                <h2>Test</h2>
                            </div>
                        </div>
                        <div>
                            <div>
                                <h2>Test</h2>
                            </div>
                        </div>
                        <div>
                            <div>
                                <h2>Test</h2>
                            </div>
                        </div>
                    </form>
                </div>

                <div>
                    <form>
                        <div>
                            <div>
                                <p>Test output</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <p>test value</p>
                            </div>
                        </div>

                        <div>
                            <div>
                                <p>Test output</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <p>test value</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <p>Test output</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <p>test value</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <p>Test output</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <p>test value</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <p>Test output</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <p>test value</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <p>Test output</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <p>test value</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <p>Test output</p>
                            </div>
                        </div>
                        <div>
                            <div>
                                <p>test value</p>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

1 Ответ

0 голосов
/ 04 декабря 2018

Если вы отключите тему через метатег, она исключит CSS, который обычно вставляется в ваш плагин.В зависимости от вашего плагина, вы можете добавить дополнительный CSS в соответствии с вашими потребностями.

Учитывая ваш пример, вот несколько базовых CSS, которые вы можете добавить: 

html[buildfire] {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: 100%;
  background: none;
  overflow: hidden !important;
}

html[buildfire] body {
  height: 100% !important;
  width: 100% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin: 0 auto;
}
...