0

So I have a dropdown and am trying to give it a dynamic height; how would this be possible using mithril.js?

This is what I have tried so far: This is a snippet of code where I am trying to give the list a dynamic height. The end goal is to have the list a dynamic height so that on a fixed navbar I can make it scrollable using overflow-y:scroll.

var h = window.innerHeight || document.documentElement.clientHeight|| document.body.clientHeight;

m("ul.nav-dropdown-menu", {
    style: { height: h+"px" },
    className: ctrl.isOpen ? 'is-open' : 'is-closed',
});
Mark Knol
  • 9,663
  • 3
  • 29
  • 44
animesh manglik
  • 755
  • 7
  • 14

1 Answers1

0

Calculating window/body/element sizes will have to be done after the page is rendered. You'll need the config attribute which allows DOM manipulation after Mithril renders the page . You can read about here: http://lhorie.github.io/mithril/mithril.html#the-config-attribute

You could do something like this: http://jsbin.com/woxuku/1/edit?js,output

App = {}

App.controller = function (attrs) {

}

App.view = function (ctrl, attrs) {
  return m("div.app", {
    style: {
      position: 'absolute',
      height: '300px',
      width: '400px',
      backgroundColor: 'lightblue'
    }
  }, [
    "navbar",
    m('nav', {
      style: {
        position: 'relative',
        backgroundColor: 'yellow'
      },
      config: function(el, isInit, context){
        el.style.height = ($('.app').getBoundingClientRect().height / 2).toString() + 'px'
        el.style.width = ($('.app').getBoundingClientRect().width / 2).toString() + 'px'
      }
    }, 'menu')
  ])
}

m.mount(document.body, App)
pelón
  • 393
  • 2
  • 5