CODEWITHSUNDEEP
jqueryhtmlcss
Steve Kim
Steve Kim

Reputation: 5591

CSS/JS positioning a button in dynamic ul

So, I have a dropdown menu with ul and li structure as below:

<ul class="container"> 
    <span class="content_container"><!-- Empty --></span>
    <span class="fixed_area">Fixed Button</span>
</ul>

Then in JS, I simply append dynamic li to the content_container:

$('span.content_container').html(li_content);

Giving...

<ul class="container">
    <span class="content_container">
       <li>Something</li>
       <!-- and so on dynamically -->
    </span>
    <span class="fixed_area">Fixed Button</span>
</ul>

I am trying to position a fixed area with a button as below image:

enter image description here

The ul has max height of 800px. When there are lots of li, then it is fairly simple to position the fixed_area button as below:

span.fixed_area {
   height: 48px;
   width: 100%;
   position: fixed;
   background-color: red;
   top: 750px;
}

I can simply position the fixed button to the bottom of the max height container.

The problem:

The problem is that since I am getting the li dynamically, there are times when not enough li is loaded, yet the fixed button is still positioned at top:750px, thus often not visible or misplaced.

What I am trying to do:

I can re-structure the html portion. I need to position the fixed button always at the bottom of the visible container regardless how long the lists are as shown in image, both A and B.

Hope this makes sense.

Any help will be much appreciated!

Upvotes: 1

Views: 690

Answers (2)

repzero
repzero

Reputation: 8412

Add a list name in the input box and press button to append it to the menu. That fixed button is still at the bottom while the options are being added at the top.

document.getElementById('press').addEventListener('click', press);
ul_container = document.getElementsByClassName('container')[0];
dummy = document.getElementById('dummy');
var inp = document.getElementById('in');

function press() {
  div = document.createElement('div');
  div.innerHTML = inp.value;
  console.log(ul_container, dummy, div)
  ul_container.insertBefore(div, dummy);

}
.container {
  display: none;
  position: absolute;
  top: 15px;
  max-height: 200px;
  overflow: auto;
  padding: 0px;
  width: 200px;
}
.container:hover {
  display: auto;
}
#menu {
  border: solid black;
  background: red;
  display: inline-block;
}
#fixed_btn,
#dummy {
  list-style-type: none
}
#fixed_btn:hover {
  cursor: pointer;
  background: green;
}
#menu:hover>ul {
  display: block;
}
li {
  padding: 0px;
  margin: none;
}
.container li:hover {
  cursor: pointer;
  background: blue;
}
<button id='press'>
  press
</button>
<input type="text" id="in">
<div id="menu">
  Menu Name
  <ul class="container">

    <li id="dummy"></li>

    <li id='fixed_btn'>BUTTON</li>
  </ul>
</div>

Upvotes: 1

Gabriela Marques
Gabriela Marques

Reputation: 111

You could constraint only the .content_container and let the button right below it.

<div class="container">
    <ul class="content_container">
       <li>Something</li>
       <!-- and so on dynamically -->
    </ul>
    <span class="fixed_area">Fixed Button</span>
</div>

The css:

.content_container {
  overflow-x: scroll;
  max-height: 750px; // reduced because it doesn't count the button.
}

You don't need any position: 

.fixed_area {
   display: inline-block; // if you want to set the height;
   height: 48px;
   width: 100%;
   background-color: red;
}

Upvotes: 5

Related Questions