How can I toggle an element without pushing down other elements

Question

I am trying to create a project collaboration to to list. hen I click on the "Assign Task" button a flyout div should contain a datepicker and a drop down of who the task should be assigned to. But for now I just put some lorem impsum text.

The problem that I am running into is when the flyout div is shown all the li elements get pushed down

I tried setting the flyout to absolute but it goes all the way to the top of the page. I tried setting the ul to absolute but it all gets collapsed in one line

Does any one have any ideas they can offer that will let me toggle the assign_task div and not push down the ul element?

Below is a link to my jsfiddle . Any help would be really appreciated.

https://jsfiddle.net/eldan88/qvrs8osm/

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <script src="../assets/js/jquery.js"></script>


    <style>

        body{
           margin-top : 300px
        }

        .assign_task,.datepicker{
            display: inline-block;
            width: 212px;
            position: relative;
            z-index: 10;
            background-color: white;


        }

        .assign_task{
            top :220px
        }






    </style>
</head>
<body>



<ul>

    <li>Finish Wireframe Design <button>Assign Task</button>

    <div class="assign_task">

        <div class="datepicker"> Due Date and user task assignment goes here


            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem eligendi eos fuga in ipsum libero sit totam veritatis? Ab adipisci architecto debitis doloremque fuga id molestiae provident saepe unde vel.lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores commodi cumque et libero nostrum porro, quae sunt! Aspernatur deleniti fugit, magni

        </div>



    </div>
    </li>

</ul>


<ul>

    <li>Make sure that the contact page, and the landing page gets revised tomorrow <button>Assign Task</button>

        <div class="assign_task">

            <span class="datepicker"> Due Date and user task assignment goes here</span>

        </div>

    </li>

</ul>

<script>

    $(".assign_task").hide();

    $("button").click(function () {

        var task_assignment_div = $(this).next();

        task_assignment_div.toggle();

    });


</script>


</body>
</html>

If you set `position:absolute` without setting `top`, the element will be displayed as though it is not positioned. [Example here](https://jsfiddle.net/qvrs8osm/2/). Also see [Position:absolute without top/left/bottom/right values](http://stackoverflow.com/questions/23133685/positionabsolute-without-top-left-bottom-right-values) — showdev, Oct 29 '15 at 00:17
Have you considered using a jQuery UI Dialog widget? That will overlay the DIV over the page. — Barmar, Oct 29 '15 at 00:18

score 3 · Accepted Answer · answered Oct 29 '15 at 00:16

To "jail" or "contain" a position: absolute, you need a parent element that is position: relative|absolute|fixed (anything no default basically).

So in your case you need:

.assign_task{
  top :220px
  position:relative;
}

If you want to have the child be position absolute. Cheers!

score 0 · Answer 2 · answered Oct 29 '15 at 00:22

0

It's true that you need to wrap a parent element in position:relative to contain the absolutely positioned element. But regarding the problem of things moving around when the flyout is shown, I suggest instead of toggle(), you toggle a css class name, assign the original flyout a default style of visibility:hidden, and have the toggled css class override that style with visibility:visible:

.assign_task {
visibility: hidden;
}
.assign_task.active { /* toggle class active */
visibility: visible;
}

answered Oct 29 '15 at 00:22

jsostrich

1
2

I agree with using css instead of the jQuery "toggle", "slideUp" style. Adding and removing a class, and then allowing your css to dictate will help with testing, and in the long run if you add css animations/transitions, be a smoother experience. – Nick Sharp Oct 29 '15 at 02:08
Okay got it. Yes I needed to wrap a parent element to relative. Thanks go thanks for letting me know about the visibility property. I never even knew about it! – json2021 Oct 29 '15 at 02:11

How can I toggle an element without pushing down other elements

2 Answers2