Steve Pisani · May 4, 2016

Bootstrap's $navbar

Hi,  The ZEN Mojo Widget reference at ../csp/sys/%ZEN.Mojo.WidgetReference.bootstrap33xHomepage.cls is a great reference for viewing the different components available with each helper plugin - and it also supplies snippets of JSON code to use in your layout definitions.


I'm having problems with the Bootstrap $navbar component however. This is layout definition, with a navbar and button contained within the bar.:


ClientMethod getLayout(key, criteria) [ Language = javascript ]
  var layout {};
  switch(key) {
  case 'home' :
   // add layout objects to the children array
layout {type:'$navbar',id:'navbar-collapse3',brand:'Brand',children:[

{type:'$button',cssClass:'navbar-btn',content:'Sign in'}   ]}


return layout;



However, I do not get a navbar, or the word "Brand" as expected, and there is no clever collapsing of any content into a vertical menu, when the viewport is reduced.

Is there something else I need to include in my layout to use $navbar ?



0 300
Discussion (1)1
Log in or sign up to continue

The navbar is not correctly initialized if it is the only content on the page as it is sized based on parent containers and siblings.

Just wrap it in a div, or a grid system and it will render correctly. You have to do that anyway if you want to add more elements to the page.