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?

Joseph Gabriel · Accepted Answer · 2013-04-05T14:39:36.677

6

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:

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
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.

edited Apr 05 '13 at 14:39

answered Apr 05 '13 at 03:45

Joseph Gabriel

8,339
3
39
53

1

Thanks for the solution! I assumed this was occurring in **viewEngine.js** or **composition.js** but never gave the transition a thought. You also indirectly taught me something else: jQuery's `.css()` method accepts camel cased property names. Explains why my search for `margin-left` didn't turn anything up in the **entrance.js** file. – chrisjsherm Apr 05 '13 at 12:41

score 1 · Answer 2 · answered Apr 16 '13 at 19:06

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

+1 This is a good solution when you want to keep the transition, but have centering for specific views (like login). — Kyeotic, Apr 18 '13 at 20:09

Disable Durandal inline styling

2 Answers2