css - Use Bootstrap sticky footer template w/ fixed navbar in entire Durandal shell -


i wondering how override styles of shell view being injected in durandal inside div id="applicationhost" ... trying use common bootstrap template (sticky footer fixed navbar) , works standalone use within shell.html "wrapper" looses auto height...

here shell.html

<div>     <div id="wrapper">             <!-- ko compose: {view: 'nav'} -->             <!-- /ko-->           <div id="content" class="container-fluid">             <!--ko compose: {                  model: router.activeitem, //wiring router                 aftercompose: router.aftercompose, //wiring router                 transition:'entrance', //use 'entrance' transition when switching views                 cacheviews:true //telling composition keep views in dom, , reuse them (only idea singleton view models)                 }--><!--/ko-->                                          </div>         <div id="push"></div>     </div>      <footer id="footer">          <div class="container-fluid">              <div class="row-fluid">                  <div class="span6"><p class="muted">&copy; abc company inc. 2013. rights reserved.</p></div>                  <div class="span6 "><p class="muted pull-right">v0.0.1-debug</p></div>                   </div>          </div>      </footer>   </div>  

the nav sub-view has standard <nav id="mainnav" class="navbar navbar-fixed-top"> , styles same on bootstrap example page...

when examine styles via firebug can see wrapper div has lost full height...driving me nuts! :)

i fixed adding following style main html page after styles necessary sticky footer work

/*durandal fixes*/ #applicationhost, #applicationhost > div {     height: 100%;  } 

the first selector takes care of applicationhost div in main html page , second 1 inserted durandal (it has class of durandal-wrapper, make selector more specific if wanted). have div in shell.html file may need following:

/*durandal fixes*/ #applicationhost, #applicationhost > div, #applicationhost > div > div {     height: 100%;  } 

Comments

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -