CODEWITHSUNDEEP
javascripthtmlcssangularjstwitter-bootstrap
Ryan
Ryan

Reputation: 343

bootstrap not loading on angular partial page

I have this issue with a couple different pages I've been working on. I'll provide a simple example. I'm not very comfortable with front-end work so apologies if my html page is hard to read.

I have an angular single-page application with a header bar that takes up 100px and then partial pages are routed below it.

my index.html

<html>
<head>
  <base href="/">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">
  <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap3.css">-->
  <link rel="stylesheet" type="text/css" href="./stylesheets/style.css">
  <link rel="stylesheet" type="text/css" href="./stylesheets/index.css">
</head>

<body data-ng-app="angulobby" data-ng-controller="indexController">
<div id="container">
  <header>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="/">AnguLobby Prototype</a>
        </div>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="/"><i class="fa fa-home"></i> Home</a></li>
          <li><a href="/login"><i class="fa fa-shield"></i> Login</a></li>
          <li><a href="/register"><i class="fa fa-comment"></i> Register</a></li>
          <div ng-controller="logoutController">
            <a ng-click='logout()' class="btn btn-default">Logout</a>
          </div>
        </ul>
      </div>
    </nav>
  </header>
  <!--injected views go here-->
  <div id="ng-view" ng-view></div>
</div>
<script src="https://use.fontawesome.com/7222f42b52.js"></script>
<script src="./socket.io/socket.io.js"></script>
<script src="./main.js"></script>

<!--expose angular controllers-->
<script src="controllers/home.js"></script>
<script src="controllers/index.js"></script>
<script src="controllers/login.js"></script>
<script src="controllers/logout.js"></script>
<script src="controllers/register.js"></script>
<script src="controllers/select-params.js"></script>
<script src="controllers/queueTimer.js"></script>
<script src="controllers/lobby.js"></script>

<!--expose angular services-->
<script src="./services/auth.js"></script>
<script src="./services/gamelist.js"></script>
<script src="./services/queue.js"></script>
<script src="./services/socket.js"></script>
<script src="./services/lobby.js"></script>
</body>
</html>

and index.css

html, body {
  height: 100%;
}
#container {
  height:100%;
  display:flex;
  flex-flow:column;
}

#ng-view {
  overflow: hidden;
}

header {
  height: 100px;
}

and then for instance if I have a simple partial page that I would like to inject into ng-view:

lobby.html

<head>
  <link rel="stylesheet" type="text/css" href="../stylesheets/lobby.css">

</head>

<div id="lobby-container" class="container">
  <div class="container">
    <div class="row">
      <div id="chat" class="col-md-2">
      </div>
      <div id="users" class="col-md-2"></div>
    </div>
  </div>
  <script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
  <script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous">
  </script>
</div>

and lobby.css

#lobby-container {
  background-color: greenyellow;
  height: 100%;
  width: 100%;
}

#chat {
  background-color: grey;
  height: 100%;
}

#users {
  background-color: darkblue;
  height: 100%;
}

When I load the partial page on it's own, no bootstrap is executed.It shows two divs without the col class attributed. enter image description here

But, when I build the project, the bootstrap is loaded. enter image description here

I understand that the general problem is that the partial views only get the bootstrap added from index.html when angular actually injects them into ng-view. What I would like to do is be able to preview each partial page and have bootstrap loaded already without having to build the project each time. I am using the webstorm IDE if that matters.

Upvotes: 2

Views: 610

Answers (1)

Ryan
Ryan

Reputation: 343

Okay, just figured it out. I had added the bootstrap.js file but forgot to add the bootstrap.css file. Adding <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

to the <head> of lobby.html fixed the problem.

Upvotes: 2

Related Questions