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


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

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

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

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

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

2 3

2 ответа:

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

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

  1. в основном.js, измените свое приложение.вызов setRoot () для удаления параметра 'entrance'. Это позволит избежать настройки стиля могут быть добавлены к корпусу контейнер
  2. в оболочке.html, удалите параметр перехода из привязки compose. Это предотвратит добавление параметров стиля в отдельные виды.

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

Поскольку входной переход добавляет Этот стиль к элементу верхнего уровня в вашем представлении, вы можете просто обернуть текущее содержимое представления другим 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>

Это сработало в моем случае, когда я центрировал контейнер-узкий div с

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

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