Disable Durandal inline styling

Question

Durandal appears to automatically add the following inline styling to the div elements wrapping its data-views:

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

This occurs in both the Durandal and John Papa Hot Towel ASP.NET SPA templates that make use of Durandal.

This inline styling is overriding my external stylesheet, so I need to disable this behavior. I'm assuming this is being injected by one of the JavaScript files, but I can't for the life of me seem to figure out where.

Anyone know how to prevent this inline styling from being added?

Answer 1

This is being set by the "entrance" transition (durandal/transitions/entrance.js). Looks like the final end point for the transition is those values, and they're not being removed when transition is complete.

You can avoid this entirely by not using the transition. This will take a couple of steps:

1. In main.js, modify your app.setRoot() call to remove the 'entrance' parameter. This will prevent the styling settings from being added to the shell container
2. In shell.html, remove the transition setting from the compose binding. This will prevent the styling settings from being added to the individual views.

The other possibility is to create your own transition that is more compatible with your CSS requirements.

Answer 2

As the entrance transition adds this style to the top level element in your view - it may be possible for you to just wrap your current view content with another div and let it take the hit of applying these values.

Before:

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

After:

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

This worked in my instance where I was centering the container-narrow div with

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

which was getting lost post-transition