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">© 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
Post a Comment