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;
}

Answer 1

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?

Question

1 answers

solution1
0 2017-03-15 08:47:45

Logic:

How to pull down the div container from top?

Question

1 answers

solution1 0 2017-03-15 08:47:45

Logic:

solution1
0 2017-03-15 08:47:45