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:'$nav',cssClass:'navbar-nav',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 ?

Thanks

Steve

  • 0
  • 0
  • 192
  • 0
  • 1

Answers

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.