How to pull down the div container from top?

Question

I just want to pull down the table tag , so that the table should get fit in the page body.

You see, in the above image top portion of the table or container got hidden (ie, it's get overlapped with nav tag).

index.html

<body id="page-top" class="index">
    <!-- Navigation -->
    <nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand" href="#page-top">Story Box</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <!-- <li class="page-scroll">
                        <a href="#portfolio">Portfolio</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#about">About</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#contact">Contact</a>
                    </li> -->
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

    <!-- Header -->

    <div class="container" tabindex="0" id="body-container">
        <div class="row col-lg-offset-5">
            <div class="form-group col-lg-12">
                <button class="btn btn-success btn-lg" href="#createModal" class="portfolio-link" data-toggle="modal">
                    <span class="glyphicon glyphicon-plus"></span>
                              Create
                </button>
            </div>
        </div>

        <table id="story-table" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Image</th>
                    <th>Audio</th>
                    <th>Video</th>
                    <th>Description</th>
                    <th>Created At</th>
                </tr>
            </thead>

            <tbody>
              {% for story in stories %}
                <tr>
                    <td>{{ story.name }}</td>
                    <td>{{ story.image }}</td>
                    <td>{{ story.audio or 'N/A' }}</td>
                    <td>{{ story.video or 'N/A'}}</td>
                    <td>{{ story.description }}</td>
                    <td>{{ story.created_at }}</td>
                </tr>
              {% endfor %}
            </tbody>
        </table>
    </div>
    </body>

main.css

#body-container{
  margin-bottom: 120px;
  padding-top: 150px;
  max-height: 600px;
}

[$(element).slideDown()](http://api.jquery.com/slidedown/). Also you are missing JS code. — Rajesh, Mar 15 '17 at 07:49
Did you specify `body { padding-top: 70px; }` in your CSS? [Your navbar is `fixed`, hence this is required](http://getbootstrap.com/components/#navbar-fixed-top). — Abhitalks, Mar 15 '17 at 07:58
Please read [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) and then update your question. — Ionut Necula, Mar 15 '17 at 08:06
@Abhitalks seems like working for table having atleast 5 records but for zero record, my footer tag gets moved to the top little bit. ah gotcha http://stackoverflow.com/a/19330799/3297613 — Avinash Raj, Mar 15 '17 at 08:08

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

You can try something like this:

Logic:

Make your table as position: absolute. This will allow you to move this table without affecting other elements.
On click, toggle value of top. Also since you need slide effect, you can use .animate.

Note: for demo purpose, I have added a temp class visible and returning top value based on this. You can use any flag mechanism to achieve this

JSFiddle

$(".navbar-toggle").on("click", function() {
  var top = getTopValue($("#story-table"));
  $("#story-table").animate({
    top: top
  }, 400).toggleClass("visible")
})

function getTopValue(el) {
  return (!el || el.hasClass("visible") ? "-100" : "100") + "px"
}

$("#story-table").css({
  top: getTopValue()
});

#body-container {
  margin-bottom: 120px;
  padding-top: 150px;
  max-height: 600px;
}

#story-table {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body id="page-top" class="index">
  <!-- Navigation -->
  <nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                </button>
        <a class="navbar-brand" href="#page-top">Story Box</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li class="hidden">
            <a href="#page-top"></a>
          </li>
          <!-- <li class="page-scroll">
                        <a href="#portfolio">Portfolio</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#about">About</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#contact">Contact</a>
                    </li> -->
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>

  <!-- Header -->

  <div class="container" tabindex="0" id="body-container">
    <div class="row col-lg-offset-5">
      <div class="form-group col-lg-12">
        <button class="btn btn-success btn-lg" href="#createModal" class="portfolio-link" data-toggle="modal">
                    <span class="glyphicon glyphicon-plus"></span>
                              Create
                </button>
      </div>
    </div>

    <table id="story-table" class="table table-striped table-bordered" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th>Name</th>
          <th>Image</th>
          <th>Audio</th>
          <th>Video</th>
          <th>Description</th>
          <th>Created At</th>
        </tr>
      </thead>

      <tbody>
        {% for story in stories %}
        <tr>
          <td>{{ story.name }}</td>
          <td>{{ story.image }}</td>
          <td>{{ story.audio or 'N/A' }}</td>
          <td>{{ story.video or 'N/A'}}</td>
          <td>{{ story.description }}</td>
          <td>{{ story.created_at }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</body>

How to pull down the div container from top?

1 Answers1

Logic: