Wt

So, I'm using https://www.webtoolkit.eu/widgets/navigation/menu as the basis for my configuration application, except that I would like for the WMenu and WStackedWidget to display side-by-side. I am trying to use responsive bootstrap, but I may not have it configured correctly. Eventually, my goal is to have the app behave like w3schools Analytics Bootstrap template (http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_temp_analytics) where the menu hides on mobile devices.

Here is my code:

#include "ConfiguratorApplication.h"
#include "WpaConfigView.h"

#include <Wt/WBootstrapTheme>
#include <Wt/WStackedWidget>
#include <Wt/WMenu>
#include <Wt/WTextArea>
#include <Wt/WBreak>

/*
 * The env argument contains information about the new session, and
 * the initial request. It must be passed to the WApplication
 * constructor so it is typically also an argument for your custom
 * application constructor.
*/
ConfigurationApplication::ConfigurationApplication(const WEnvironment& env)
  : WApplication(env)
{
  WBootstrapTheme *theme = new WBootstrapTheme();
  theme->setVersion(WBootstrapTheme::Version3);
  theme->setResponsive(true);
  setTheme(theme);

  setTitle("Configurator");                               // application title

  WContainerWidget* container = root();
  container->setStyleClass("container fluid");


  WContainerWidget* root_ = new WContainerWidget();
  container->addWidget(root_);
  root_->setStyleClass("row content");

  WContainerWidget* nav = new WContainerWidget();
  nav->setStyleClass("col-sm3 sidenav hidden-xs");
  root_->addWidget(nav);

  WContainerWidget* body = new WContainerWidget();
  body->setStyleClass("col-sm9");
  body->addWidget(new WBreak());
  root_->addWidget(body);

  Wt::WStackedWidget *contents = new Wt::WStackedWidget(body);

  Wt::WMenu *menu = new Wt::WMenu(contents, nav);
  menu->setStyleClass("nav nav-pills nav-stacked");

  // Add menu items using the default lazy loading policy.
  menu->addItem("Network", new WpaConfigView());

  menu->addItem("Internal paths", new Wt::WTextArea("Internal paths contents"));
  menu->addItem("Anchor", new Wt::WTextArea("Anchor contents"));
  menu->addItem("Stacked widget", new Wt::WTextArea("Stacked widget contents"));
  menu->addItem("Tab widget", new Wt::WTextArea("Tab widget contents"));
  menu->addItem("Menu", new Wt::WTextArea("Menu contents"));
}

I am using the col-### classes to lay out the menu and the stacked components. However, when I load the app into Chrome, and open the inspection view, those class attributes appear in the elements pane, but they don't appear in the styles pane. I'm not sure what that means.

Peter.

Peter.