text: Errai using bootstrap template with non functioning data-toggle buttonharis hashim Mar 25, 2016 2:21 AM
  Hello there!
  I am trying errai UI that is properly setup with bootstrap template created using Pingendo.
  This is pretty straight forward, i.e. I just use simple code plus default template created by pingendo without much change.
  The thing is that, if I run the html file (names App.html) using browser directly. The template work in the sense that when I make the browser windows small, it will display a burger navigation button on top right corner of windows. Clicking this button will drop down the navigation menu.
  I have create Errai project with the App.html file. Where I have App.java using that App.html as template. Run it and it display similar page as if I just run it from browser. The burger navigation button will be displayed when browser window is resized to small/mobile device size. However the burger button does not do anything when I click it.
  Here is the html code pertaining to the burger button:
  <div id="sidebarwrapper" class="wrapper" data-field=body>
  <div class="cover">
  <div class="navbar">
  <div class="container" data-field=content>
  <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-
  <span class="sr-only">Toggle navigation</span> <span
  class="icon-bar"></span> <span class="icon-bar"></span> <span
  class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#"><span>Starter</span><br></a>
  </div>
  <!-- Continue .... -->
  This is App.java code. Which should do nothing much to cause anything to happen.
  @EntryPoint
  @ApplicationScoped
  @Templated ("#body")
  public class App extends Composite {
  @Inject
  private Navigation navigation;
  @PostConstruct
  public void clientMain() {
  RootPanel.get().add(this);
  }
  }
  This is my second try. I.e. previously I use Errai getting started code with Admin LTE bootstrap template and stuck at same problem. So must be same issue and something that I don't really understand.
  My take is that possibly the GWT stuff is clashing with the page js stuff that make the button function. Or possibly I need to use Navigation class and that Navigation class will somehow create a drop down burger menu to navigate to pages. Probably I need to write GWT code to make that button function and can not rely just on the template JS to make things happen? How?
  Appreciate a long detail answer. I have to admit that I dont really understand Errai UI even after reading the doc and tutorial. Usually I only understand stuff after playing with them, discover a block and get that block solved. Just this time around, I can't get my brain to muster pass this block .
  TIA and The Bestest Regards!
  Haris
  1. Re: Errai using bootstrap template with non functioning data-toggle buttonharis hashim Mar 26, 2016 10:07 PM (in response to haris hashim)
  2. Re: Errai using bootstrap template with non functioning data-toggle buttonharis hashim Mar 28, 2016 3:04 PM (in response to haris hashim)1 of 1 people found this helpful
  Turns out it actually works. But the sample template by Pingendo have issue whereby heading/title element overlapse/cover the burger button.
  Discovered this accidentally when discovered that sometime the berger button was clickable (i.e. only partially overlap/covered).
  Hopefully this reply help other people with same problem.
  * Moderation takes too long that I solve it my self. Appreciate faster moderation in the future.