Отключить встроенный стиль Durandal

Durandal, по-видимому, автоматически добавляет следующие встроенные стили к элементам div, обертывающим его представления данных:

style="margin-left: 0px; margin-right: 0px; opacity: 1; display: block;"

Это происходит в шаблонах ASP.NET SPA Durandal и John Papa Hot Towel, которые используют Durandal.

Этот встроенный стиль переопределяет мою внешнюю таблицу стилей, поэтому мне нужно отключить это поведение. Я предполагаю, что это вводится одним из файлов JavaScript, но я не могу понять, где именно.

Кто-нибудь знает, как предотвратить добавление этого встроенного стиля?


asp.net single-page-application durandal hottowel
person chrisjsherm    schedule 05.04.2013    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Это устанавливается переходом «вход» (durandal/transitions/entrance.js). Похоже, что конечной точкой перехода являются эти значения, и они не удаляются после завершения перехода.

Вы можете полностью избежать этого, не используя переход. Это займет пару шагов:

  1. В main.js измените вызов app.setRoot(), чтобы удалить параметр «вход». Это предотвратит добавление настроек стиля в контейнер оболочки.
  2. В shell.html удалите настройку перехода из привязки компоновки. Это предотвратит добавление настроек стиля к отдельным видам.

Другая возможность — создать собственный переход, более совместимый с вашими требованиями CSS.

person Joseph Gabriel    schedule 05.04.2013
comment
Спасибо за решение! Я предполагал, что это происходит в viewEngine.js или composition.js, но никогда не задумывался о переходе. Вы также косвенно научили меня еще кое-чему: метод jQuery .css() принимает имена свойств в верблюжьем регистре. Объясняет, почему мой поиск margin-left ничего не дал в файле entrance.js. - person chrisjsherm; 05.04.2013

arrow_upward
1
arrow_downward

Поскольку входной переход добавляет этот стиль к элементу верхнего уровня в вашем представлении, вы можете просто обернуть содержимое текущего представления другим div и позволить ему применить эти значения.

До:

<div class="container-narrow">    
    <div class="row-fluid">
        <div class="span12">
            <h2>Title</h2>
            ....
        </div>
    </div>
</div>

После:

<div>
    <div class="container-narrow">    
        <div class="row-fluid">
            <div class="span12">
                <h2>Title</h2>
                ....
            </div>
        </div>
    </div>
<div>

Это сработало в моем случае, когда я центрировал узкий контейнер с помощью

.container-narrow 
{
margin: 0 auto;
max-width: 400px;
}

который терялся после перехода

person George Goodchild    schedule 16.04.2013
comment
+1 Это хорошее решение, если вы хотите сохранить переход, но с центрированием для определенных представлений (например, входа в систему). - person Kyeotic; 19.04.2013