Flask sidebar shows up at the top, not on the side

Question

I am writing a simple Flask app, and I want a sidebar to always be present. I tried using the template below, but for some reason the sidebar appears at the top, not on the left-hand side where I want it. Here's what it looks like:

and here's what I want it to look like:

Here's the code I tried:

<head>
   <!-- Latest compiled and minified CSS -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

  <!-- Latest compiled JavaScript -->
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <!-- jQuery library -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <!--- FontAwesome -->
 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">

</head>
<body>
 <div id="wrapper">
 <!-- Sidebar -->
  <div id="sidebar-wrapper">
  <ul class="sidebar-nav">
            <li class="sidebar-brand">
                <a href="#">
                    Start Bootstrap
                </a>
            </li>
            <li>
                <a href="#">Dashboard</a>
            </li>
            <li>
                <a href="#">Shortcuts</a>
            </li>
    </ul>
    </div>
    <!-- /#sidebar-wrapper -->

<div id = "page-content-wrapper">
  <div class="container-fluid">
   <h2>Results</h2>

  <ul class="nav nav-pills">
    <li class="active"><a data-toggle="pill" href="#topic">Topics</a></li>
    <li><a data-toggle="pill" href="#result1">Result1</a></li>
    <li><a data-toggle="pill" href="#result2">Result2</a></li>
    <li><a data-toggle="pill" href="#result3">Result3</a></li>
    <li><a data-toggle="pill" href="#result4">Result4</a></li>
  </ul>

 </div> <!-- /#container-fluid -->
</div> <!-- /#page-content-wrapper -->

</div> <!-- /#wrapper -->
<!-- jQuery -->
<script src="{{ url_for('static', filename='js/jquery.js') }}"></script>

 <!-- Bootstrap Core JavaScript -->
 <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>

 <!-- Menu Toggle Script -->
 <script>
 $("#menu-toggle").click(function(e) {
     e.preventDefault();
     $("#wrapper").toggleClass("toggled");
 });
 </script>

Could someone please help?

Nandita Sharma · Accepted Answer · 2018-06-19T16:47:31.433

Add these styles

#wrapper {
  display: flex;
}

h2 {
  margin: 0 !important;
}

#wrapper {
  display: flex;
}

h2 {
  margin: 0 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!--- FontAwesome -->
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">

</head>

<body>
  <div id="wrapper">
    <!-- Sidebar -->
    <div id="sidebar-wrapper">
      <ul class="sidebar-nav">
        <li class="sidebar-brand">
          <a href="#">
                Start Bootstrap
            </a>
        </li>
        <li>
          <a href="#">Dashboard</a>
        </li>
        <li>
          <a href="#">Shortcuts</a>
        </li>
      </ul>
    </div>
    <!-- /#sidebar-wrapper -->

    <div id="page-content-wrapper">
      <div class="container-fluid">
        <h2>Results</h2>

        <ul class="nav nav-pills">
          <li class="active"><a data-toggle="pill" href="#topic">Topics</a></li>
          <li><a data-toggle="pill" href="#result1">Result1</a></li>
          <li><a data-toggle="pill" href="#result2">Result2</a></li>
          <li><a data-toggle="pill" href="#result3">Result3</a></li>
          <li><a data-toggle="pill" href="#result4">Result4</a></li>
        </ul>
        <div id="result1">
          Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1
          Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1
          Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1
          Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content Result 1 Some content
        </div>
        <div id="result2">
          Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2
          Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2 Result2
          Result2 Result2 Result2 Result2 Result2
        </div>
        <div id="result3">
          Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3
          Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3 Result3
          Result3
        </div>
        <div id="result4">
          Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4
          Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result
          4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4 Result 4
        </div>
      </div>
      <!-- /#container-fluid -->
    </div>
    <!-- /#page-content-wrapper -->

  </div>
  <!-- /#wrapper -->
  <!-- jQuery -->
  <script src="{{ url_for('static', filename='js/jquery.js') }}"></script>

  <!-- Bootstrap Core JavaScript -->
  <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>

  <!-- Menu Toggle Script -->
  <script>
    $("#menu-toggle").click(function(e) {
      e.preventDefault();
      $("#wrapper").toggleClass("toggled");
    });
    $(".nav-pills a").click(function(e) {
      e.preventDefault();
      var id = this.hash.substr(1);
      document.getElementById(id).scrollIntoView();
    })
  </script>

Thanks Nandita! This helped with the sidebar placement, but it seems to have created another problem. The main page contents now seem to be stuck at tab1 1 ("Result1"), and when I press on any of the other tabs nothing happens. Do you know if there's a way to keep the sidebar there while I toggle between different tabs on the main page? — user3490622, Jun 19 '18 at 16:13

Flask sidebar shows up at the top, not on the side

1 Answers1