locked
[HTML + JS] Почему слетает вёрстка в нативном шаблоне? RRS feed

  • Общие обсуждения

  • Выбрал шаблон "универсальное приложение Hub/Pivot". С помощью WinJS.Navigation.navigate() иду в другую страницу, потом возвращаюсь обратно - и вёрстка слетает! Вот слетевшая вёрстка:

    Как побороть проблему?


    ©KW

    5 апреля 2015 г. 9:09

Все ответы

  • Интересный факт. Был на студенческом хакатоне (сам то не студент, стар уже) и практически все прославляют JS и пишут на нем. А когда дело доходит до решения проблем на JS, то никто не может помочь ибо опытные пишут на шарпе и плюсах (а я на VB). Видимо это проблема переходного периода и мы скоро будем динозаврами.

    Так вот это я к чему - черт его знает, почему у вас разметка слетает. Была бы разметка на XAML глядишь и помогли бы, а так вам помогают гораздо реже, как вы могли заметить.


    VB.Net - WPF, WinRT, WP

    • Изменено LXGDARK 5 апреля 2015 г. 9:22
    5 апреля 2015 г. 9:14
  • Продолжаю копать, пока есть эти заметки:

    • Если переходить по встроенным в шаблон html-страницам - всё норм
    • Если переходишь на свой html-файл - всё слетает. Свой html-файл я создавал как объект PageControl, так что всё легально
    • Если переходить на любой, включая свой, js- или css-файл - всё норм
    • Волшебные WinJS.Resources.processAll() и WinJS.UI.processAll() ничего не решают
    • Может быть, проблема в navigator.js? Хотя там конкретные страницы не объявлены.
    • При слетании верстки в DOM'е нет ничего лишнего, никаких лишний стилей и атрибутов не заносится

    ©KW

    12 апреля 2015 г. 8:29
  • "Продолжаю копать" 2:

    • Если переходить со страницы с Hub/Pivot на другую страницу с Hub/Pivot, то вёрстка чудесным образом остаётся целой!

    Напрашивается вывод: если на странице будут нативные контролы, то верстка, скорее всего, не слетит. Это не решение проблемы, но что-то в этом есть.


    ©KW

    29 апреля 2015 г. 12:27
  • Ура! Проблема решена!

    Как оказалось, в созданных страницах применялся CSS-стиль к классу .fragment элемента hub.

    Стиль примерно такой:

    .fragment {
    	-ms-grid-columns: 1fr;
    	-ms-grid-rows: 128px 1fr;
    	display: -ms-grid;
    	height: 100%;
    	width: 100%;
    }

    Там используется относительная единица измерения fr, которая гробила всю верстку в элементе hub, добавляя по 128px к строкам табличной размётки с префиксом -ms-.

    Достаточно было поменять класс в html и css-файлах, например, на fragment2, и проблема решилась!


    ©KW


    • Изменено Kenya-West 9 июня 2015 г. 11:10
    5 мая 2015 г. 3:27