Twitter Bootstrap navbar not working in PLAY framework

StackOverflow https://stackoverflow.com/questions/23650503

Question

I have a main.scala.html which has header,navbar and footbar as follows-

    @(title: String)(content: Html)

    <!DOCTYPE html>
    <html>
    <head>
            <ul  class="nav nav-justified" id="myTab">

              <li><a href="@routes.Application.apps()" data-toggle="tab">@Messages("views.main.apps")</a></li>
            <li ><a href="#" data-toggle="tab">@Messages("views.main.activity")</a></li>
            <li><a href="@routes.Application.devices()" data-toggle="tab">@Messages("views.main.devices")</a></li>
            <li><a href="#" data-toggle="tab">@Messages("views.main.account")</a></li>
            <li id="logout" data-toggle="tab"><a href="#">@Messages("views.main.logout")</a></li>
            </ul>
            <div id="showData">
            @content
            </div>
    </div>
</head>
<body>
    </body>
    </html>

The page content should be displayed as in the tags. However on clicking the tabs the page contents are not getting displayed.

Note the page contents were getting displayed earlier on clicking on the tabs but after adding data-toggle="tab" to the list elements it stopped displaying.

Was it helpful?

Solution

Check your html code: 

...
<head>
    <ul  class="nav nav-justified" id="myTab">

There is a end head and start div tag missing.

OTHER TIPS

Preview source code generated by Play in the browser and use built-in browser inspector for HTML error (also you can just try to validate it with W3C Validator

If your view looks exactly as you showed as - it can not produce valid HTML document

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top