2 Replies Latest reply on Mar 26, 2016 10:07 PM by haris hashim

    Errai using bootstrap template with non functioning data-toggle button

    haris hashim Newbie

      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-toggle="collapse"

                                  data-target="#navbar-ex-collapse">

                                  <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