CODEWITHSUNDEEP
javascriptjquerycss
Youss
Youss

Reputation: 4212

How to position div underneath dynamic ul

I have a ul/li which is only visible with onkeyup event. If an input field is empty the ul/li disappears (hide), all is done with plain JavaScript and Jquery. The problem is that I want to position a div underneath the ul/li (when it is visible). How do I do that? Should I use CSS like position:absolute/relative/fixed (which didn't work so far), or do I have to use JavaScript for this?

Upvotes: 0

Views: 191

Answers (4)

George Cummins
George Cummins

Reputation: 28906

If the "underneath" div should also be invisible until the onkeyup even occurs, toggle it's visibility in the same way that you toggle the ul.

If the "underneath" div should always be visible, you can use visibility: hidden instead of display: none on the ul. This will make the ul invisible, but will preserve its position in the page flow.

Upvotes: 1

Orlando Rincon
Orlando Rincon

Reputation: 11

It have to work with absolute positioning, but take care to have both in the same parent with position relative or absolute, this is very important.

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382706

You have two options with pure CSS:

1) Use absolute position.

2) Give parent element relative position and your div (child) absolute position so that child does not escape out of parent. Finally use top, left, bottom, right properties to position element exactly where you want.

Upvotes: 1

Marc B
Marc B

Reputation: 360702

Wrap the ul and div and then show/hide the wrapper instead of the ul:

<div id="wrapper">
   <ul> <li> ... </li> </ul>
   <div>the div you want below the ul</div>
</div>

Upvotes: 1

Related Questions