javascript - How to manipulate HTML element styles in aurelia-router postRender step -
i make aurelia application footer height dynamic, tried use aurelia-router postrender
step following aurelia hub documentation.
here way tried achieve it, app.js
code:
export class app { configurerouter(config, router) { config.title = 'aurelia'; var step = { run: (navigationinstruction, next) => { $('.page-host').css('padding-bottom', $('#footer').outerheight() + 'px'); return next(); } }; config.addpostrenderstep(step); config.map([ { route: ['', 'welcome'], name: 'welcome', moduleid: 'views/welcome', nav: false, title: 'welcome' } ]); this.router = router; } }
and here app.html
markup:
<template> <require from="global/nav-bar.html"></require> <require from="global/footer-bar.html"></require> <require from="styles/style.css"></require> <nav-bar></nav-bar> <div class="page-host"> <router-view></router-view> <footer-bar></footer-bar> </div> </template>
in addition <footer-bar></footer-bar>
contains footer#footer
element.
what missing?
Comments
Post a Comment